html5 canvas仿ps橡皮擦效果_類似刮刮卡橡皮擦效果



55 219 74



特效描述:html5 canvas 仿ps橡皮擦效果 類似刮刮卡 橡皮擦效果,兩層圖片,前面的圖片可以擦除,漏出第二層圖片,類似刮刮卡橡皮擦的效果

代碼結構

1. HTML代碼

	<div class="box" id="bb">
		<canvas id="cas" width="1366" height="651"></canvas>
	</div>
	<script type="text/javascript" charset="utf-8">
		var canvas = document.getElementById("cas"),ctx = canvas.getContext("2d");
		var x1,y1,a=30,timeout,totimes = 100,jiange = 30;
		canvas.width = document.getElementById("bb").clientWidth;
		canvas.height = document.getElementById("bb").clientHeight;
		var img = new Image();
		img.src = "sha.jpg";
		img.onload = function(){
			ctx.drawImage(img,0,0,canvas.width,canvas.height)
			//ctx.fillRect(0,0,canvas.width,canvas)
			tapClip()
		}
		//通過修改globalCompositeOperation來達到擦除的效果
		function tapClip(){
			var hastouch = "ontouchstart" in window?true:false,
				tapstart = hastouch?"touchstart":"mousedown",
				tapmove = hastouch?"touchmove":"mousemove",
				tapend = hastouch?"touchend":"mouseup";
			ctx.lineCap = "round";
			ctx.lineJoin = "round";
			ctx.lineWidth = a*2;
			ctx.globalCompositeOperation = "destination-out";
			canvas.addEventListener(tapstart , function(e){
				clearTimeout(timeout)
				e.preventDefault();
				x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
				y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
				ctx.save();
				ctx.beginPath()
				ctx.arc(x1,y1,1,0,2*Math.PI);
				ctx.fill();
				ctx.restore();
				canvas.addEventListener(tapmove , tapmoveHandler);
				canvas.addEventListener(tapend , function(){
					canvas.removeEventListener(tapmove , tapmoveHandler);
					timeout = setTimeout(function(){
						var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
						var dd = 0;
						for(var x=0;x<imgData.width;x+=jiange){
							for(var y=0;y<imgData.height;y+=jiange){
								var i = (y*imgData.width + x)*4;
								if(imgData.data[i+3] >0){
									dd++
								}
							}
						}
						if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
							canvas.className = "noOp";
						}
					},totimes)
				});
				function tapmoveHandler(e){
					clearTimeout(timeout)
					e.preventDefault()
					x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
					y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
					ctx.save();
					ctx.moveTo(x1,y1);
					ctx.lineTo(x2,y2);
					ctx.stroke();
					ctx.restore()
					x1 = x2;
					y1 = y2;
				}
			})
		}
		//使用clip來達到擦除效果
		function otherClip(){
			var hastouch = "ontouchstart" in window?true:false,
				tapstart = hastouch?"touchstart":"mousedown",
				tapmove = hastouch?"touchmove":"mousemove",
				tapend = hastouch?"touchend":"mouseup";
			canvas.addEventListener(tapstart , function(e){
				clearTimeout(timeout)
				e.preventDefault();
				x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
				y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
				ctx.save()
				ctx.beginPath()
				ctx.arc(x1,y1,a,0,2*Math.PI);
				ctx.clip()
				ctx.clearRect(0,0,canvas.width,canvas.height);
				ctx.restore();
				canvas.addEventListener(tapmove , tapmoveHandler);
				canvas.addEventListener(tapend , function(){
					canvas.removeEventListener(tapmove , tapmoveHandler);
					timeout = setTimeout(function(){
						var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
						var dd = 0;
						for(var x=0;x<imgData.width;x+=jiange){
							for(var y=0;y<imgData.height;y+=jiange){
								var i = (y*imgData.width + x)*4;
								if(imgData.data[i+3] >0){
									dd++
								}
							}
						}
						if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
							canvas.className = "noOp";
						}
					},totimes)
				});
				function tapmoveHandler(e){
					e.preventDefault()
					x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
					y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
					var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
					var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)));
					var x3 = x1+asin;
					var y3 = y1-acos;
					var x4 = x1-asin;
					var y4 = y1+acos;
					var x5 = x2+asin;
					var y5 = y2-acos;
					var x6 = x2-asin;
					var y6 = y2+acos;
					ctx.save()
					ctx.beginPath()
					ctx.arc(x2,y2,a,0,2*Math.PI);
					ctx.clip()
					ctx.clearRect(0,0,canvas.width,canvas.height);
					ctx.restore();
					ctx.save()
					ctx.beginPath()
					ctx.moveTo(x3,y3);
					ctx.lineTo(x5,y5);
					ctx.lineTo(x6,y6);
					ctx.lineTo(x4,y4);
					ctx.closePath();
					ctx.clip()
					ctx.clearRect(0,0,canvas.width,canvas.height);
					ctx.restore();
					x1 = x2;
					y1 = y2;
				}
			})
		}
</script>
<script type="text/javascript" >
window.setTimeout('CountDown()',100);
// End
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 疊加浮動層 層疊疊加 疊加層疊 層疊 疊加 加載更多 圖片拖動 圖片拖拽 圖片疊加 圖片層疊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子