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("刮奖结束！");
});