刮刮卡——canvas实践

1、利用css将

与层重叠；

• 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
})

完整代码：