Canvas 刮刮乐

1、先在页面里创建一个canvas；

<canvas id='canvas' width="500" height="300"></canvas>

2、css样式

        #canvas{
            border: 1px solid gray;
            display: block;
            margin: 0 auto;
            background: url('img/0.jpg');
        } 

3、js完整代码：

        var ctx=document.getElementById('canvas').getContext('2d');
        ctx.fillStyle='black';
        ctx.fillRect(0,0,800,400);
        console.log("dsfndftnfgyj" ); 

        //这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串
        ctx.globalCompositeOperation ='destination-out';//现有内容保持在新图形不重叠的地方。
        //鼠标按下
        canvas.onmousedown=function(){
            // console.log(hhhhh);
            //鼠标移动
            canvas.onmousemove=function(event){
                console.log(event.offsetX,event.offsetY);//获取鼠标在当前
                ctx.beginPath();
                ctx.arc(event.offsetX,event.offsetY,50,0,2*Math.PI,false);
                ctx.fillStyle='red';
                ctx.fill();
            }
        }//鼠标抬起
        canvas.onmouseup=function(){
            canvas.onmousemove=null;//清除移动
        }    

4、效果图：