浅谈HTML5 canvas实现移动端刮奖效果-蒲公英云

浅谈HTML5 canvas实现移动端刮奖效果

1、刮奖图片通过设置div的背景图片实现，设置一个完全罩住刮奖图片的canvas，在canvas中绘制了一块等大的浅灰色矩形，使其盖住下方的刮奖图片。

2、为使得手指划过画布时，擦除掉相应区域的浅灰色，可以运用canvas中的globalCompositeOperation属性，通过将其设置为destination-out，使得在已填充颜色的基础上再次进行绘制时，所绘制的区域变得透明，从而露出下方的刮奖图片。

3、为画布创建touchmove事件侦听，当手指在画布上滑动时，在触摸位置绘制相应圆形，与已有的填充色互相消减，从而擦去浅灰色涂层。

4、触摸点的pageX和pageY属性返回的是针对整个页面的坐标，需要将其减去画布自身相对页面的x和y偏移坐标offsetLeft和offsetTop，才能得到画布中所要绘制的圆形的坐标。

5、在实际开发中，用户刮奖完毕后基本都将跳转到下一个界面，来提示获奖的具体信息等，因此需要判断用户是否刮奖完毕，假设当90%的涂层像素都被抵消掉，即90%的面积都被刮开时，用户可以较完整地得到了获奖信息，此时可以判断刮奖已经结束。

HTML：

<div id="award"></div>
<canvas id="mask" width="200" height="100"></canvas>

JavaScript：

var canvas = document.getElementById("mask");
var context = canvas.getContext("2d");
context.fillStyle="#D1D1D1"; //设置填充色为浅灰色
context.fillRect(0, 0, 200, 100); //填充该颜色，以覆盖下方的背景图片
context.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchmove', function(event) {
    event.preventDefault(); //先去除默认的响应行为
    var touch = event.touches[0]; //获取触摸的第一个点
    context.beginPath(); //开始路径的绘制
    context.arc(touch.pageX - canvas.offsetLeft, touch.pageY - canvas.offsetTop, 20, 0, Math.PI * 2); //在所触摸处绘制圆形，半径为20像素
    context.closePath(); //结束路径绘制
    context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色
    context.fill(); //填充该颜色
    var imgData = context.getImageData(0, 0, 200, 100); //获取画布中的所有像素
    var data = imgData.data; //得到像素的字节数据
    var length = data.length; //获取该数据的长度
    var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量
    for (var i = 0; i < length; i += 4) { //循环遍历每一个像素
        var alpha = data[i + 3]; //获取每个像素的透明度数值
        if (alpha < 10) //当透明度小于10时，认为它已经被擦除，transparent数值加1
            transparent++;
    }
    var percentage = transparent / (length / 4); //计算透明像素在所有像素点中所占比例
    if (percentage > 0.9) //当比例大于90%时，显示刮奖结束字样
        alert("刮奖结束！");
});