1、利用css将<li>与<canvas>层重叠；

• html

	
    
        
     		
             
     		
     
			
      
		
     
	
    
		复制代码

• css

复制代码

2. 在canvas画布上绘制刮刮卡图层图像；

var canvas = document.querySelector("canvas");canvas.width = document.documentElement.clientWidth;canvas.height = document.documentElement.clientHeight;if(canvas.getContext){  var ctx = canvas.getContext("2d")  var img = new Image()  img.src = "img/a.png"  img.onload = function(){    draw()}function draw(){  var flag = 0  //用于后面统计刮开百分比  ctx.drawImage(img,0,0,canvas.width,canvas.height)}复制代码

3、在canvas画布区域监听鼠标事件或触摸事件；

// 监听鼠标和touch事件canvas.addEventListener('mousedown', moveStart, false);canvas.addEventListener('touchstart', moveStart, false);canvas.addEventListener('mousemove', move, false);canvas.addEventListener('touchmove', move, false);canvas.addEventListener('mouseup', moveEnd, false);canvas.addEventListener('touchend', moveEnd, false);复制代码

4、在手指移动过程中，实时计算手指在画布中的位置以及移动路径，利用canvas的globalCompositeOperation方法中的destination-out效果将刮过的地方设置为透明从而实现刮卡的效果；

canvas.addEventListener("touchstart",function(ev){    ev = ev||event;    var touchC = ev.changedTouches[0];						    var x = touchC.clientX - canvas.offsetLeft;    var y = touchC.clientY - canvas.offsetTop;    //画线，解决快速画圆bug					    ctx.lineWidth = 40    ctx.lineCap = "round"    ctx.lineJoin = "round"    ctx.globalCompositeOperation="destination-out";    ctx.save();    ctx.beginPath();    ctx.moveTo(x,y)    ctx.lineTo(x+1,y+1)    ctx.stroke()    ctx.restore()})canvas.addEventListener("touchmove",function(ev){    ev = ev||event;    var touchC = ev.changedTouches[0];						    var x = touchC.clientX - canvas.offsetLeft;    var y = touchC.clientY - canvas.offsetTop;						    ctx.save();    ctx.lineTo(x,y)    ctx.stroke()    ctx.restore()})复制代码

5、设置当canvas涂层被刮到一定百分比时去除整个涂层；

• 利用canvas的getImageData可以获取指定范围区域的每个像素点的rgba的信息，其中a指的是透明度，当a为0时，该像素点完全透明，当a为255时，表示该像素点完全不透明；
• 通过遍历指定区域的像素点信息，得到透明像素点的个数
  • 透明像素点的个数/总像素点的个数=刮开区域所占百分比
  • 通过设置阈值，使得当所刮区域占比满足一定值时，刮开整个canvas涂层；

canvas.addEventListener("touchend",function(){    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)    var allPx = imgData.width*imgData.height    for(var i = 0;i
    
     =allPx/2){        canvas.style.opacity = 0     }})					复制代码
    

6、全部刮开以后，删canvas层

canvas.addEventListener("transitionend",function(){    this.remove()  //自杀，删除canvas})复制代码

完整代码：

			
    		
    								
    
			
     			
     
				
      
			
     
		
    
				复制代码