在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例JavaScript基础 → js 实现橡皮擦 擦图效果(可用于刮刮卡)

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

JavaScript基础

下载此实例
  • 开发语言:js
  • 实例大小:0.30M
  • 下载次数:13
  • 浏览次数:839
  • 发布时间:2016-09-23
  • 实例类别:JavaScript基础
  • 发 布 人:1107137393
  • 文件格式:.zip
  • 所需积分:2
 相关标签: 刮刮卡 js 橡皮擦

实例介绍

【实例简介】

【实例截图】

【核心代码】

<!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>

标签: 刮刮卡 js 橡皮擦

实例下载地址

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

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警