实现刮刮乐效果，计算被刮开百分比

需要用到的知识点

1.canvas globalCompositeOperation ： 设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上 ,这个属性是重点
2.canvas getImageData：getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
3.Element.getBoundingClientRect：方法返回元素的大小及其相对于视口的位置。

效果图：

css

*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}
.canvas_box{
    position: relative;
    width: 569px;
    height: 234px;
    border: 1px solid #ccc;
}
.canvas_box img{
    position: absolute;
    left: 0;
    top: 0;
    width: 569px;
    height: 234px;
}
.canvas_box canvas{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
 button{
    width: 200px;
    height: 100px;
    font-size: 16px;
}

html

<div class="canvas_box">
    <img src="./canvas_btm.png" alt="刮刮乐底图">
    <canvas  id="canvas"></canvas>
</div>
<button id="button">再来一次</button>

javascript

window.onload = function(){
    var mousedown = false;//判断是否在canvas按下
    var canvas = document.getElementById('canvas');
    var button = document.getElementById('button');
    var ctx = canvas.getContext('2d');
    var w = 569,h = 234;
    canvas.width = w;
    canvas.height = h;
    
    //给画布添加事件
    //若需要在pc端展示，请将下面的事件改为pc端事件mousedown、mouseup、mousemove
     canvas.addEventListener('touchstart',function (ev) {
            ev = ev || event;
            ev.preventDefault();
            mousedown = true;
        });
      canvas.addEventListener('touchmove',function (ev) {
           ev = ev || event;
           ev.preventDefault();
           if(mousedown) {
               if(ev.changedTouches){
                   ev=ev.changedTouches[ev.changedTouches.length-1];
               }
               var position = canvas.getBoundingClientRect();//获取当前元素相对于屏幕的坐标
               var x = ev.pageX - position.left;
               var y = ev.pageY - position.top;
               ctx.beginPath();
               ctx.arc(x, y, 20, 0, Math.PI * 2);
               ctx.fill();
               isArea();
           }
        });
        
        canvas.addEventListener('touchend',function (ev) {
            ev = ev || event;
            ev.preventDefault();
            mousedown = false
        });
		//给按钮添加再来一次事件
		button.addEventListener('touchstart',function () {
            init();
        });
        init();
		function init(){
		//初始化画布的状态
			ctx.canvas.style.opacity = 1;
            //给画布铺底色
            ctx.fillStyle = 'purple';
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = 'destination-out';//重点
		}
		function isArea(){
			//判断刮开面积是否到达百分之六十
			 var data = ctx.getImageData(0,0,w,h).data;//获取画布的信息
	            var n = 0 ;
	            for (var i = 0; i < data.length; i++) {
	                if (data[i] == 0) {
	                    n++;
	                };
	            };
	            if (n >= data.length * 0.6) {
	                ctx.globalCompositeOperation = 'destination-over';//重点
	                ctx.canvas.style.opacity = 0;
	                alert('教程结束')
	            }
		}

}