前端开发canvas实现刮刮乐

如何做好前端开发
前端开发人员如何用微擎
前后端分离前端如何开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
        <title>刮刮乐</title>
        <meta name=”viewport” content=”initial-scale=1, maximum-scale=1″ />
        <meta name=”apple-mobile-web-app-capable” content=”yes” />
        <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
    </head>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        canvas {
            background: url(http://img3.iqilu.com/data/attachment/forum/201308/22/085546j0ririiunwsiiwbe.jpg)
                no-repeat center/100% 100%;
        }
    </style>
    <body>
        <canvas id=”canvas”></canvas>
    </body>
    <script type=”text/javascript”>
        ;(function(win, el) {
            var canvas = document.querySelector(el),
                ctx = canvas.getContext(‘2d’)
            canvas.width = win.innerWidth
            canvas.height = win.innerHeight
            ctx.fillStyle = ‘#CCC’
            ctx.fillRect(0, 0, canvas.width, canvas.height) //绘制灰色蒙版
            ctx.globalCompositeOperation = ‘destination-out’ //原有图形中与新图形不重叠的部分会被保留
            ctx.lineWidth = 60
            ctx.lineCap = ’round’
            ctx.lineJoin = ’round’
            var isUp = true
            canvas.addEventListener(‘mousedown’, function(e) {
                isUp = false
                ctx.moveTo(e.pageX, e.pageY)
            })
            canvas.addEventListener(‘mousemove’, function(e) {
                //模拟刮卡行为
                if (isUp) return
                ctx.fillStyle = ‘yellow’
                ctx.lineTo(e.pageX, e.pageY)
                ctx.stroke()
            })
            canvas.addEventListener(‘mouseup’, function(e) {
                isUp = true
            })
            canvas.addEventListener(‘mouseout’, function(e) {
                isUp = true
            })
        })(window, ‘#canvas’)
    </script>
</html>
前端开发如何获取后端数据
如何学好前端开发
前端开发 如何单元测试
» 本文来自:前端开发者 » 《前端开发canvas实现刮刮乐》
» 本文链接地址:https://www.rokub.com/6852.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!