canvas-刮刮乐

1.将刮刮乐的奖品设置为canvas的背景图

canvas.style.background='url()'
2.绘制遮盖层
ctx.fillStyle='rgb(211,211,211)'
ctx.fillRect(0,0,canvas.width,canvas.height)
3.绘制涂抹的小圆
ctx.globalCOmpostieOperation='destination-out';//需要在绘制新图形的时候让原图形与新图形重合部分消息,消失的部分变成透明,就能看见奖品的部分内容
ctx.arc(50,50,0,2*Math.PI);
ctx.fill();
4.实现刮的效果:按下鼠标不放,同时移动鼠标
$('canvas).on('mousedown',function(){
//鼠标还是按着的状态,同时移动鼠标
  $('canvas').on('mousemove',function(e){
    //根据鼠标位于canvas中的坐标绘制指定的圆
    var circleX=e.pageX-canvas.offsetLeft;
    var circleY=e.pageY-canvas.offsetTop;
    ctx.beginPath();
    ctx.arc(circleX,circleY,50,0,2*Math.PI);
    ctx.fill();
    //判断涂抹的区域是否大于画布的一半
    //1.获取canvas标签中每一个像素点的信息(rgba的值)
    var datas=ctx.getImageData(0,0,canvas.width,canvas.height).data;
    //2.判断每一个像素点是否已经被刮掉了
    var pionts=0;//保存了所有没有被刮掉的像素点
    for(var i=0;i<datas.length;i+=4){
      //3.判断如果该像素点的rgba的值还等于原来的值,说明该点没有被刮掉
      if(datas[i]==211&&datas[i+1]==211&&datas[i+2]==211&&datas[i+3]==255){
        pionts++;
      }
    }
    if(pionts<canvas.width*canvas*height/2){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      //解除所有的事件绑定
      $('canvas').off('mousedown mousemove');
    }
  })
})
$('canvas').on('mouseup mouseleave',function(){
//鼠标离开画布让刮的
  $('canvas').off('mousemove')
})