使用canvas绘制刮刮卡案列

最新推荐文章于 2021-03-05 09:29:53 发布

原创最新推荐文章于 2021-03-05 09:29:53 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML5的Canvas元素创建互动效果，包括将Canvas覆盖于背景图上、在Canvas中绘制图片，并通过手指触控事件擦除部分图像，当透明区域超过一定比例时，显示目标图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、通过定位的方式将canvas画布覆盖在目标背景图上，canvas的宽高设置成视口的宽高

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap,ul,ul>li{
				height: 100%;
			}
			ul>li{
				background: url(img/b.png);
				background-size: 100% 100%;
			}
			#canvas{
				position: absolute;
				top: 0px;
				left: 0px;
				transition: 1.5s;
			}			
</style>

<div id="wrap">
	<canvas id="canvas"></canvas>
	<ul>
		<li></li>
	</ul>
</div>

2、直接在canvas中绘制源图片，源图片的宽高设置成画布的宽高

3、通过手指触发事件，将手指所滑动的区域设置透明，如果透明区域面积大于画布的三分之一，那么通过过渡将目标图片展示

<script type="text/javascript">
		var oc = document.getElementById("canvas");
		oc.width = document.documentElement.clientWidth;
		oc.height = document.documentElement.clientHeight;
		if(oc.getContext){
			var ctx = oc.getContext("2d");
			var img = new Image();
			img.src="img/a.png";
			img.onload=function(){
				draw();
			}
			
			function draw(){
				ctx.drawImage(img,0,0,oc.width,oc.height);
				
				/*touchstart手指按下时触发事件*/
				oc.addEventListener("touchstart",function(ev){
					//兼容各个浏览器
					/*在FireFox浏览器中，事件绑定的函数要获取到事件本身，
					 * 需要从函数中传入，而IE等浏览器则可以直接使用
					 * event或者window.event得到事件本身。
					 * */
					ev = ev || event;
					//涉及当前(引发)事件的触摸点的列表
					var touchC = ev.changedTouches[0];
					/*
					 * clientX:当鼠标事件发生时，鼠标相对于浏览器的x轴的位置
					 * offsetLet:当前对象到上级层左边的位置
					 * 
					 * */
					var x = touchC.clientX - oc.offsetLeft;
					var y = touchC.clientY - oc.offsetTop;
					ctx.globalCompositeOperation="destination-out";
					ctx.lineWidth=40;
					ctx.lineCap="round";
					ctx.lineJoin="round";
					ctx.save();
					ctx.beginPath();
					/*ctx.arc(x,y,20,0,360*Math.PI/180);
					ctx.fill();*/
					ctx.moveTo(x,y);
					ctx.lineTo(x+1,y+1);
					ctx.stroke();
					ctx.restore();
				});
				/*touchmove鼠标滑动事件*/
				canvas.addEventListener("touchmove",function(ev){
					ev = ev || event;
					var touchC = ev.changedTouches[0];
					var x = touchC.clientX-oc.offsetLeft;
					var y = touchC.clientY-oc.offsetTop;
					ctx.save();
					/*ctx.arc(x,y,20,0,360*Math.PI/180);
					ctx.fill();*/
					ctx.lineTo(x,y);
					ctx.stroke();
					ctx.restore();
				});
				/*touchend鼠标离开事件*/
				canvas.addEventListener("touchend",function(){
					
					var flag = 0;
					var imgData = ctx.getImageData(0,0,oc.width,oc.height);
					var allPx = imgData.width*imgData.height;
					for(var i=0;i<allPx;i++){
						if(imgData.data[4*i+3]==0){
							flag++;
						}
					}
					if(flag>allPx/3){
						oc.style.opacity=0;
					}
				});
				
				canvas.addEventListener("transitionend",function(){
					this.remove();
				})
			}
		}
		
		
	</script>