H5新特新--canvas之刮刮乐案例

原理及思路分析：

• 首先在“刮刮乐”的底层放置两张图片，一张是中奖的、一张是没中的，然后利用随机数给定一个中奖率。例如，当达到百分之多少时，即为中奖，那么此时就应该显示中奖的那张图片，反之显示未中奖的图片
• 然后利用canvas给图片增加一个遮罩层，以此来模拟现实中的刮奖效果
• 再者利用鼠标的按下事件、移动事件以及抬起事件，当鼠标按下并移动时，则利用canvas的擦除也就是clearRect()来进行模拟
• 最后为了防止当鼠标抬起时，在屏幕上滑动也能实现“刮奖”效果，在这里我们需要清除，也就是当鼠标抬起时，原本的“刮奖”效果失效，只有当鼠标按下并移动时，才能实现“刮奖”效果

 canvas {
            border: 1px solid orangered;
            margin: 100px;
        }

 <canvas>您的浏览器不支持canvas标签</canvas>

 <script>
        var arr = ['img/1.jpg', 'img/2.jpg'];
        var flag = 0;
        var obj = {};

        //图片预加载
        for (var i = 0; i < 2; i++) {
            //创建对象
            var img = new Image();

            img.src = arr[i];

            // 将图片存入对象
            obj[i] = img;

            img.onload = function() {
                flag++;

                // 判断图片是否加载完
                if (flag == arr.length) {
                    // console.log('图片加载完成');
                    // console.log(obj);
                    callback(obj);
                }
            }
        }

        function callback(obj) {
            var mycanvas = document.querySelector('canvas');

            //10%的中奖率
            var num = Math.ceil(Math.random() * 10);

            // 判断是否中奖
            if (num == 8) {
                mycanvas.style.background = 'url(' + arr[1] + ')';
            } else {
                mycanvas.style.background = 'url(' + arr[0] + ')';
            }

            //绘制一个遮盖层
            var ctx = mycanvas.getContext('2d');

            // 填充颜色
            ctx.fillStyle = '#ccc';

            //绘制
            ctx.fillRect(0, 0, mycanvas.width, mycanvas.height);

            //刮开效果
            mycanvas.onmousedown = function() {
                mycanvas.onmousemove = function(e) {
                    e = e || window.event;
                    var mouseX = e.offsetX;
                    var mouseY = e.offsetY;

                    // 擦除
                    ctx.clearRect(mouseX, mouseY, 10, 10);
                }
            }

            //当鼠标放开时，取消onmousemove事件
            mycanvas.onmouseup = document.onmouseup = function() {
                mycanvas.onmousemove = null;
            }
        }
</script>