canvas画布实现刮刮乐刮奖

- 日理万妓 2021-09-16 04:22 514阅读 0赞

![70][]

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#cv{
    			/*border:1px solid;*/
    			position: absolute;
    			left:35px;
    			top:175px;
    		}
    		div{
    			width: 200px;
    			height: 100px;
    			font-size:30px;
    			line-height: 100px;
    			text-align: center;
    			position:absolute;
    			left:50px;
    			top:185px;
    		}
    		img{
    			width: 300px;
    			height: 500px;
    		}
    	</style>
    </head>
    <body>
    	<img src="./cark.png">
    	<div id="text"></div>
    	<canvas id="cv" width="247" height="120"></canvas>
    </body>
    	<script type="text/javascript">
    		//定义数组,在随机抽奖做准备
    		var arr =["谢谢惠顾","特等奖","张国荣的吻","美女50","豪车100","优酷会员1个月","风油精一打"];
    		var  index = parseInt(Math.random()*arr.length);
    		text.innerHTML=arr[index];
    		console.log(index);
    		var ctx = cv.getContext("2d");
    		ctx.beginPath();
    		//只有灰色区域是画布,红色的图片是添加到body中的
    		ctx.fillStyle="gray";
    		ctx.fillRect(0,0,250,120);
    		//显示源图像之外的目标图像,此刻灰色区域就是目标图像,在mousemove中绘制的圆为源图像
    		ctx.globalCompositeOperation="destination-out";
    		ctx.beginPath();
    		cv.onmousedown = function(e){	
    			document.onmousemove = function(e){
    				console.log(222);
    				var e = e || window.event;
    				//e.clientX是获取的关于浏览器可视窗口的鼠标点坐标
    				//求关于灰色区域的鼠标点位置,就需要减去灰色区域的offsetLeft以及offsetTop
    				var x = e.clientX-cv.offsetLeft;
    				var y = e.clientY-cv.offsetTop;
    				ctx.moveTo(x,y);
    				console.log(x,y);
    				//绘制源图片,为圆形
    				ctx.arc(x,y,10,0,Math.PI*2,false);
    				ctx.fill();	
    				//getImageData运行在服务器环境下:能得到一个对象,对象中的data属性存储了关于参数中的四个值,
    				//从哪里开始获取获取多大的图像的每个点的像素值,四个为一组,分别代表rgba
    				//获取每次移动的时候画布上面的所有像素点,当每第四个值为0时,就表示该像素点为透明,当所有判断
    				//透明度的值有百分之60之上,就清空画布,将刮奖区完全显示出来
    				var mydata = ctx.getImageData(0,0,cv.width,cv.height);
    						var data = mydata.data;
    						var count = 0;
    						for(var i=0;i<data.length;i+=4){
    							console.log(111);
    							var a = data[i+3];
    							if(a==0){
    								count++;
    								console.log(count);
    							}
    							if(count>=data.length/4*0.6){
    								ctx.clearRect(0,0,cv.width,cv.height);
    							}
    						}		
    			}
    		}
    		
    	</script>
    </html>

[70]: /images/20210813/1c6a63e7f5a4416e8a7f075f2da512dc.png