必威体育Betway必威体育官网
当前位置:首页 > IT技术

用H5canvas制作刮刮卡,很有趣哦

时间:2019-07-25 20:40:00来源:IT技术作者:seo实验室小编阅读:57次「手机版」
 

刮刮卡制作

H5 canvas标签制作刮刮卡,只适合移动端,PC端有小问题

记得 把图片换一换!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>
		<title></title>
		<style>
			*{
				margin:0px;padding:0px;
			}
			html,body{
				height:100%;
				overflow:hidden;
			}
			#wrap,ul,ul>li{
				height:100%;
			}
			ul>li{
				background:url(0.jpg);
				background-size:cover;
			}
			canvas{
				position:absolute;
				left:0;
				top:0;
				transition:2s;
			}
		</style>
	</head>
	<body>
		<p id="wrap">
			<canvas></canvas>
			<ul>
				<li></li>
			</ul>
		</p>
	</body>
	<script>
		window.function(){
			var canvas=document.getElementsByTagName('canvas')[0];
			canvas.width=document.documentElement.clientwidth;//canvas的宽=视口的宽
			canvas.height=document.documentElement.clientheight;//canvas的高=视口的高
			//判断浏览器是不是兼容canvas
			if(canvas.getcontext){
				var ctx=canvas.getContext('2d');
			}
			//用js     new一个image标签;
			var img=new Image();
			img.src='1.jpg';
			//图片加载完才能操作
			img.function(){
				draw();
			}
			
			function draw(){
				//在canvas上画图片
				ctx.drawImage(img,0,0,canvas.width,canvas.height);
				ctx.stroke();
				
				//手指接触屏幕
				canvas.addeventlistener('touchstart',function(ev){
					ev=ev||event;
					var touchC=ev.changedTouches[0];//拿第一根手指
					//获取手指接触屏幕的坐标
					var x=touchC.clientX-canvas.offsetleft;
					var y=touchC.clientY-canvas.offsettop;
					
					ctx.save();
					//只留下目标超过源的部分
					ctx.globalCompositeOperation='destination-out'
					ctx.lineWidth=40;
					ctx.lineCap="round";
					ctx.lineJoin="round";
					ctx.beginPath();
					//只能画线,用线模拟圆
					ctx.moveTo(x,y);
					ctx.lineTo(x+1,y+1);
					ctx.stroke();
					ctx.restore();
				});
				//手指在屏幕上滑动
				canvas.addEventListener('touchmove',function(ev){
					ev=ev||event;
					var touchC=ev.changedTouches[0];//拿第一根手指
					//获取手指接触屏幕的坐标
					var x=touchC.clientX-canvas.offsetLeft;
					var y=touchC.clientY-canvas.offsetTop;
					
					ctx.save();
					ctx.globalCompositeOperation='destination-out'
					ctx.lineWidth=40;
					ctx.lineCap="round";
					ctx.lineJoin="round";
					ctx.lineTo(x+1,y+1);
					ctx.stroke();
					ctx.restore();
				});
				var flag=0;
				//手指离开屏幕
				canvas.addEventListener('touchend',function(){
					var imgdatga=ctx.getImageData(0,0,canvas.width,canvas.height);
					//拿到所有的像素
					var allPx=imgdatga.width*imgdatga.height;
					
					for(var i=0;i<allPx;i++){
					    if(imgdatga.data[4*i+3]==0){
					    	flag++;
					    }
					}
					//如果划开的像素大于整个canvas的一半,就让canvas的透明度为0,让图片显示出来
					if(flag>=allPx/2){
						canvas.style.opacity=0;
					}
					//过渡执行完,透明度为0,就把canvas在页面上删除
					canvas.addEventListener('transitionend',function(){				
							this.remove();//删除canvas
					});
				});
				
				
				
			}
			
		}
	</script>
</html>

相关阅读

支付宝刮刮卡忘了刮怎么办?支付宝刮刮卡在哪看?

支付宝刮刮卡忘了刮怎么办?支付宝刮刮卡在哪看?支付宝刮刮卡是新上线的功能,可以刮得一些优惠券,支付宝刮刮卡忘了刮怎么办?大家不要

微信刮刮卡怎么做?

移动营销成为了大趋势,如何提高粉丝的粘性成为了企业营销的难题。微信刮刮卡抽奖是吸引用户关注微信公众号的其中一个途径,通过微信

微信刮刮卡怎么弄?

说到微信公众号营销活动,大家都会想到微信刮刮卡、微信大转盘活动、微信h5小游戏、图文投票活动等,这些都是主流的常见的微信朋友圈

分享到:

栏目导航

推荐阅读

热门阅读