刮刮卡demo-canvas实践

最新推荐文章于 2021-07-11 09:38:38 发布

weixin_34024034

最新推荐文章于 2021-07-11 09:38:38 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca18a2be51d451641175137

版权

1、利用css将<li>与<canvas>层重叠；

html

<body>
	<div id="wrap">
        <!-- 灰色涂层 -->
		<canvas></canvas>
        <!-- 刮卡结果 -->
		<ul>
			<li></li>
		</ul>
	</div>		
</body>
复制代码

<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;
				left: 0;
				top: 0;
				transition: 1s;
			}
		</style>
复制代码

在canvas画布上绘制刮刮卡图层图像；

var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if(canvas.getContext){
  var ctx = canvas.getContext("2d")
  var img = new Image()
  img.src = "img/a.png"
  img.onload = function(){
    draw()
}
function draw(){
  var flag = 0  //用于后面统计刮开百分比
  ctx.drawImage(img,0,0,canvas.width,canvas.height)
}
复制代码

3、在canvas画布区域监听鼠标事件或触摸事件；

// 监听鼠标和touch事件
canvas.addEventListener('mousedown', moveStart, false);
canvas.addEventListener('touchstart', moveStart, false);
canvas.addEventListener('mousemove', move, false);
canvas.addEventListener('touchmove', move, false);
canvas.addEventListener('mouseup', moveEnd, false);
canvas.addEventListener('touchend', moveEnd, false);
复制代码

4、在手指移动过程中，实时计算手指在画布中的位置以及移动路径，利用canvas的globalCompositeOperation方法中的destination-out效果将刮过的地方设置为透明从而实现刮卡的效果；

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;
    //画线，解决快速画圆bug					
    ctx.lineWidth = 40
    ctx.lineCap = "round"
    ctx.lineJoin = "round"
    ctx.globalCompositeOperation="destination-out";

    ctx.save();
    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.lineTo(x,y)
    ctx.stroke()
    ctx.restore()
})
复制代码

5、设置当canvas涂层被刮到一定百分比时去除整个涂层；

利用canvas的getImageData可以获取指定范围区域的每个像素点的rgba的信息，其中a指的是透明度，当a为0时，该像素点完全透明，当a为255时，表示该像素点完全不透明；
通过遍历指定区域的像素点信息，得到透明像素点的个数
- 透明像素点的个数/总像素点的个数=刮开区域所占百分比
- 通过设置阈值，使得当所刮区域占比满足一定值时，刮开整个canvas涂层；

canvas.addEventListener("touchend",function(){
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
    var allPx = imgData.width*imgData.height
    for(var i = 0;i<allPx;i++){
        if(imgData.data[i*4+3]===0){
            flag++
        }
     }
    if(flag>=allPx/2){
        canvas.style.opacity = 0
     }
})					
复制代码

6、全部刮开以后，删canvas层

canvas.addEventListener("transitionend",function(){
    this.remove()  //自杀，删除canvas
})
复制代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<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;
				left: 0;
				top: 0;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<canvas></canvas>
			<ul>
				<li></li>
			</ul>
		</div>		
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("canvas");
			canvas.width = document.documentElement.clientWidth;
			canvas.height = document.documentElement.clientHeight;
			if(canvas.getContext){
				var ctx = canvas.getContext("2d")
				var img = new Image()
				img.src = "img/a.png"
				img.onload = function(){
					draw()
				}
				function draw(){
					var flag = 0
					ctx.drawImage(img,0,0,canvas.width,canvas.height)
					
					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.lineWidth = 40
						ctx.lineCap = "round"
						ctx.lineJoin = "round"
						ctx.globalCompositeOperation="destination-out";
						ctx.save();
						
						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.lineTo(x,y)
						ctx.stroke()
						ctx.restore()
					})
					
					canvas.addEventListener("touchend",function(){
						var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
						var allPx = imgData.width*imgData.height
						for(var i = 0;i<allPx;i++){
							if(imgData.data[i*4+3]===0){
								flag++
							}
						}
						if(flag>=allPx/2){
							canvas.style.opacity = 0
						}
					})
					
					canvas.addEventListener("transitionend",function(){
						this.remove()  //自杀，删除canvas
					})
				}
			}
		}
	</script>
</html>

复制代码

weixin_34024034

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刮刮卡demo-canvas实践

1、利用css将<li>与<canvas>层重叠；html<body> <div id="wrap">  <canvas></canvas>  <ul> <li></...
复制链接

扫一扫