js 实现橡皮擦擦图效果(可用于刮刮卡)

基本信息
源码名称：js 实现橡皮擦擦图效果(可用于刮刮卡)
源码大小：0.30M
文件格式：.zip
开发语言：js
更新时间：2016-09-23
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元　
源码介绍
<!DOCTYPE html>
<!-- saved from url=(0046)http://2.axescanvas.sinaapp.com/clip/clip.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0;">
	<title>Document</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		.box{
			position: absolute;
			left:0;
			top:0;
			bottom:0;
			right: 0;
			background:url("girl1.jpg") no-repeat;
			background-size: 100% 100%;
			backface-visibility: hidden;
			overflow: hidden;
		}
		#cas{
			width: 100%;
			height: 100%;
			opacity: 1;
			-webkit-transition:opacity .5s;
			-ms-transition:opacity .5s;
			-moz-transition:opacity .5s;
		}
		
		.noOp{
			opacity: 0 !important;
		}
	</style>
</head>
<body>
	<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 = "girl2.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>

</body></html>