很多网站上都有刮刮乐的效果，这个呢，也不是很完善，大神们可以多提提意见哟！！豌豆拜上
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> canvas{ background: url("guaguale.jpg"); } </style>
</head>
<body>
<!-- 画布的大小和图片的大小是一样的哟-->
<canvas width="300" height="300"></canvas>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script> var canvas=document.querySelector('canvas'); var ctx=canvas.getContext('2d'); //逻辑部分 //1.画出一个与画布一样大小的填充矩形 ctx.fillStyle='#c1c1c1'; ctx.fillRect(0,0,300,300); //当绘制两个图形的时候，两个图像有相交的部分时，显示旧图形与新图形不想交的部分 ctx.globalCompositeOperation='destination-out'; //2.鼠标按下并移动的时候以鼠标经过的点为圆心划圆 $('canvas').on('mousedown',function(){ $('canvas').on('mousemove',function(e){ //4.解决最随意画出两个圆，两个圆自动相连的bug ctx.beginPath(); //3.获取事件对象，通过事件对象获取鼠标在画布中的坐标，通过坐标来划圆 ctx.fillStyle='#fff'; ctx.arc(e.offsetX,e.offsetY,30,0,Math.PI*2); ctx.fill(); //6.判断用户涂抹一半剩下的自动消失 //6.1获取矩形中所有像素点rgba的值组成的数组 var data=ctx.getImageData(0,0,canvas.width,canvas.height).data; //6.2声明一个变量来对被擦除的点进行计数 var sum=0; //6.3循环数组中的rgba中的所有的a值，判断a值如果为0时代表已经被用户擦除，sum++ for(var i=3;i<data.length;i+=4){ if(data[i]==0){ sum++; } } //6.4当sum中的数值超过画布中像素点的一半时，清除整个画布中的矩形，并且解除事件处理程序 if(sum>=canvas.width*canvas.height/2){ ctx.clearRect(0,0,canvas.width,canvas.height); $('canvas').off('mousedown mousemove'); } }) }).on('mouseup',function(){ //5.解决点击一次，然后移动就可以消除的bug $('canvas').off('mousemove'); }); </script>
</body>
</html>实现效果：
效果就是这个样子了，随便贴了一张图，哈哈
刮刮乐原图：
后面没有用原生js，用的jq，这样写起来简单方便点，用js也可以，有喜欢用js的可以留言一起交流哟！拜啦~~