H5之canvas刮刮卡

亦凉 2021-07-24 16:48 464阅读 0赞

**原理**：利用globalCompositeOperation 抠出来那个画出来的那个图像设置为透明，然后就能看到这个画布下层的图片  
**api**: globalCompositeOperation\*  
属性设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串

ctx.globalCompositeOperation = type;
    type的12种类型见：https://developer.mozilla.org/enUS/docs/Web/API/Canvas_API/Tutorial/Compositing
    
    常用的：
    source：源
    destination：目标
    	source-over:(默认值)：源在上面，新的图像层级比较高
    	source-in:只留下源与目标的重叠的部分（源的那一部分）
    	source-out:只留下源超过目标的部分
    	source-atop:砍掉源溢出的部分
    	destination-over:目标在上面，旧的图像层级比较高
    	destination-in:只留下源与目标的重叠部分（目标的那一部分）
    	destination-out:只留下目标和超过源的部分
    	destination-atop:砍掉目标溢出的部分

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    		<title></title>
    		<style> * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } /* 继承 */ #guguka, .images { height: 100%; } #guguka>.images { background-image: url(./Images/02.png); background-size: 100% 100%; } #canvas { position: absolute; top: 0; left: 0; transition:1s; } </style>
    	</head>
    	<body>
    		<div id="guguka">
    			<canvas id="canvas"></canvas>
    			<div class="images"></div>
    		</div>
    	</body>
    	<script> const canvas = document.querySelector('#canvas') var ctx = canvas.getContext('2d') canvas.width = document.documentElement.clientWidth canvas.height = document.documentElement.clientHeight var img = new Image() img.src = 'Images/03.jpg' img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) var flag =0; canvas.addEventListener('touchstart', function(e) { e = e || event let Touches = e.changedTouches[0] let x = Touches.clientX - canvas.offsetLeft let y = Touches.clientY - canvas.offsetTop ctx.globalCompositeOperation = "destination-out"; ctx.lineWidth = 40; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + 1, y + 1) ctx.stroke(); ctx.restore(); }) canvas.addEventListener('touchmove', function(e) { e = e || event let Touches = e.changedTouches[0] let x = Touches.clientX - canvas.offsetLeft let y = Touches.clientY - canvas.offsetTop ctx.save() ctx.lineTo(x, y) ctx.stroke() ctx.restore() }) canvas.addEventListener('touchend',function(e){ var imgData = ctx.getImageData(0,0,canvas.width,canvas.height) //拿到所有的像素点的总值 var allPx = imgData.width * imgData.height; // 判断嘛,如果一个像素点变成透明就flag++嘛 for(var i=0;i<allPx;i++){ if(imgData.data[4*i+3]===0){ flag++; } // 判断嘛,当flag透明的像素点大于所有像素点的30/36的时候就将canvas的透明度设置为0嘛 if(flag>=allPx/36*30){ canvas.style.opacity=0; //然后在CSS设置个transition:1s;嘛 } } }) // 最后动画结束之后把canvas这个节点删除了嘛 canvas.addEventListener('transitionend',function(){ console.log(this) this.remove(); }) } </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/6c979cd4973a4a708ddc1bb3942a13f3.png