canvas 刮刮乐

今天我们来模拟刮刮乐效果

既然是使用Canvas来完成刮刮乐的效果，那么我们先来创建一个Canvas标签，并给它赋予一个边框，以便于我们查看画布位置及大小。

html

<img src="df.jpg"/>
<canvas id="mycanvas" width="200" height="200">
    你的浏览器不支持canvas
</canvas>

css

*{
    margin: 0;
    padding: 0;
}
img{
    position: relative;
    margin: 0;
    border:1px solid #000000;
}
canvas{
    border: 1px solid #000000;
    position: absolute;
    top:0;
    left: 0;
}

js

var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        
        //目标图
        context.beginPath();
        context.fillStyle="gainsboro";
        context.fillRect(0,0,200,200);
        //只显示目标图，不显示源图
        context.globalCompositeOperation="destination-out"
        

源图的绘制，隐藏了绘制的源图，只显示目标图，显示底层图片，canvas画布是透明的

//源图
        canvas.onmousedown = function(ev){
            var ev = window.event||ev;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
            context.beginPath();
            context.moveTo(x,y);
            canvas.onmousemove = function(ev){
                var ev = window.event||ev;
                var xx = ev.clientX - canvas.offsetLeft;
                var yy = ev.clientY - canvas.offsetTop;
                context.lineTo(xx,yy);
                context.strokeStyle = "white";
                context.lineWidth=20;
                context.stroke();
                
                
            }
        }
        document.onmouseup = function(){
            canvas.onmousemove = null;
        }

源图的绘制，隐藏了绘制的源图，只显示目标图，由于隐藏了源图，所以源图部分的透明度为0；因此我们可以根据这个特性，设置当源图的像素点，达到目标图一般时，清空画布

//源图
        var isF = true;
        canvas.onmousedown = function(ev){

            var ev = window.event||ev;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
            if(isF){
                context.beginPath();
                isF = false;
            }
            
            context.moveTo(x,y);
            canvas.onmousemove = function(ev){
                var ev = window.event||ev;
                var xx = ev.clientX - canvas.offsetLeft;
                var yy = ev.clientY - canvas.offsetTop;
                context.lineTo(xx,yy);
                context.strokeStyle = "white";
                context.lineWidth=20;
                context.stroke();
                var imgData = context.getImageData(0,0,canvas.width,canvas.height);
                var count =0;
                for(var i=0;i<imgData.data.length;i+=4){
                    var a = imgData.data[i+3];
                    if(a==0){
                        count++;
                    }
                }
                
                if(imgData.data.length/count<=8){
                    for(var i=0;i<imgData.data.length;i+=4){
                     imgData.data[i+3]=0;
                    }
                    //清空画布
//                  context.clearRect(0,0,canvas.width,canvas.height);
                    //清空画布（不推荐）
//                  canvas.width = canvas.width;
                    //重画源图
//                  context.beginPath();
//                  context.fillRect(0,0,canvas.width,canvas.height);
                }
                context.putImageData(imgData,0,0)
                
            }
        }
        document.onmouseup = function(){
            canvas.onmousemove = null;
        }