canvas涂抹达到一定比例缓慢消失【刮刮奖类似】

直接先看效果吧：

解释都写在代码里了，如果需要原文件，可以私聊我随时在（原文件也有jquery无缝轮播兼容手机浏览器和微信浏览器哦）。

样式代码：

*{margin: 0px;padding:0px;}
			body{
			    -moz-user-select: none;
			    -webkit-user-select: none;
			    -ms-user-select: none;
			    -khtml-user-select: none;
			    user-select: none;
				margin-top: 300px;
				margin-left: 300px;
			}
			#box{width: 525px;height: 300px;background-color: #00B834;position: relative;overflow: hidden;}
			#canvas{position: absolute;top: 300px;left: 300px;}
			#banner{list-style: none;width: 500%;height: 100%;position: absolute;top: 0px;left: 0px;}
			#banner li{float: left;width: 20%;height: 100%;}
			.tran{transition: all 0.5s;}
			#box .mark{position: absolute;width: 100%;height: 20px;bottom: 20px;text-align: center;}
			.mark span{display: inline-block;width: 25px;height: 5px;background-color: #a5a2af;border-radius: 3px;margin-left: 15px;}
			.mark span:nth-of-type(1){background-color:#b3856af7 ;}
			.canvasAnimation{animation: canvas 0.5s forwards;}
			@keyframes canvas{
				from{opacity: 1;}
				to{opacity: 0;}
			}

结构代码：

<div id="box">
			<ul id="banner">
				<li><img src="img/121519-1563768919b946.jpg" width="100%"height="100%" draggable="false"></li>
				<li><img src="img/104217-156298573792c2.jpg" width="100%"height="100%" draggable="false"></li>
				<li><img src="img/221508-15605217086e6f.jpg" width="100%"height="100%" draggable="false"></li>
				<li><img src="img/230941-15711521814e0c.jpg" width="100%"height="100%" draggable="false"></li>
			</ul>
			<p class="mark">
				
			</p>
		</div>
		<canvas id="canvas" width="525" height="300"></canvas>

配置参数：

				/* 配置参数 staart */
				let canvasimg="img/204822-156742850260f4.jpg";//涂抹前景图
				let smearProportion=40;//设置涂抹比例，大于清除canvas画布
				/* 配置参数 end */

上第一部分的canvas涂抹代码：

/*涂抹显示操作 */
				let dom=document.getElementById("canvas");
				let hb=dom.getContext("2d");
				let img=new Image();//创建图片对象
				img.src=canvasimg;
				img.onload=function(){//图片加载完成后把图片放入画布
					hb.drawImage(img,0,0,525,300);
				}
				let badge=false;//开关按钮
				function pressDowm(){//鼠标按下打开开关
					badge=true;
				};
				function pictureProportion() {//计算比例
				    let pixels = hb.getImageData(0, 0, 525, 300);//获取getImageData，该对象保存了图片每个像素的数据
				    let pdata = pixels.data;//像素数据
				    let len = pdata.length;//像素数据长度
				    let total = len / 4;//这里求有多少个像素，一个像素由rgba组成所以每4个数等于++一个像素
				    let count = 0;//记录有多少像素透明
				    for (let i = 0; i < len; i += 4) {
				        if (parseInt(pdata[i+3]) === 0) {//上面的+4是因为4个数=1个像素，+3就等于取一个像素中a的值，[r,g,b,a]
				            count++;//一个像素变为透明就记录
				        }
				    }
				    return Math.round((count / total) * 100);//有多少像素透明/总共多少像素再*100，就是百分比，需要加上%号哦。
				}
				function judgmentRation(num) {//判断比例
				    num = num || 0;
				    if (num > smearProportion) {//比例大于就删除canvas节点
						dom.classList.add("canvasAnimation");
						setTimeout(function(){dom.remove();dom.classList.remove("canvasAnimation");},500);
				    }
				};
				function mousemove(e){
					 e.preventDefault();
					if(badge){//判断开关是否开启
					hb.globalCompositeOperation = 'destination-out';//这是必须加的，在原图像中显示目标图像
					hb.beginPath();//新建路径
					hb.arc(e.offsetX,e.offsetY,10,0,Math.PI*2);//画圆
					hb.fill();//填充
					judgmentRation(pictureProportion());
					}
				};
				function release(){//鼠标松开或者移除关闭开关
					badge=false;
				}
				dom.addEventListener("mousedown",pressDowm);
				dom.addEventListener("mousemove",mousemove);
				dom.addEventListener("mouseup",release);
				dom.addEventListener("mouseout",release);

第二部分无缝轮播：

/* banner图添加操作 */
				let ul=document.getElementById("banner");
				let box=document.getElementById("box");
				let li=ul.querySelectorAll("li");
				let mark=document.getElementsByClassName("mark")[0];
				for (let i=0;i<li.length;i++) {//添加标识
					let span=document.createElement("span");
					mark.appendChild(span);
				}
				let copy=li[0].cloneNode(true);
				ul.appendChild(copy);//添加所复制的节点
				let moveX=0;//记录按下时的x坐标
				let left=0;//记录翻的页数
				function bannerDown(e){
					moveX=e.offsetX;
				}
				function bannerUp(e){
					for(let i=0;i<mark.querySelectorAll("span").length;i++){
						mark.querySelectorAll("span")[i].style.backgroundColor="#a5a2af";
					}
					if((moveX-e.offsetX)>0){
						left--;
						if(left==-5){
							ul.classList.remove("tran");
							ul.style.left="0px";
							left=-1;
						}
						setTimeout(function() {//这一步不是多此一举，我一开始也很纳闷怎么没有按照上下执行顺序执行代码，jquery是不需要的，js我只能用一个计时器来强制上下文顺序
						ul.classList.add("tran");
						ul.style.left=left+"00%";
						}, 10);
					}else{
						left++;
						if(left==1){
							ul.classList.remove("tran");
							ul.style.left="-400%";
							left=-3;
						}
						setTimeout(function() {
							ul.classList.add("tran");
							ul.style.left=left+"00%";
							}, 10);
						
					}
					let bz=Math.abs(left);
					if(bz==4){
						bz=0;
					}
					mark.querySelectorAll("span")[bz].style.backgroundColor="#b3856af7";
				}
				box.addEventListener('mousedown',bannerDown);
				box.addEventListener('mouseup',bannerUp);