最近又被支付宝的集福字刷屏了
我到底还是没有碰到敬业福ค(TㅅT) 心塞
今天给大家产生移动端的刮刮乐借助
效果就是这样的
手滑动会有摇动卡 
当翻卡面积超过70%以上，自动刮开全部灰色图层 
代码不是很多
全部代码就这些
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no" name="viewport"> <title>Scrape</title> <style> #myCanvas { background-repeat: no-repeat; background-position: center; background-size: 200px 200px; } </style></head><body> <canvas id="myCanvas" width=300 height=300></canvas> <script> var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), w = canvas.width; h = canvas.height; area = w * h; l = canvas.offsetLeft; t = canvas.offsetTop, img = new Image(); var randomImg = function(){ var random = Math.random(); if(random < 0.4){ img.src = './1.png'; }else if(random > 0.6){ img.src = './2.png'; }else{ img.src = './award.jpg'; } }; var bindEvent = function(){ canvas.addEventListener('touchmove', moveFunc, false); canvas.addEventListener('touchend', endFunc, false); }; var moveFunc = function(e){ var touch = e.touches[0], posX = touch.clientX - l, posY = touch.clientY - t; ctx.beginPath(); ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0); ctx.fill(); }; var endFunc = function(e){ var data = ctx.getImageData(0, 0, w, h).data, scrapeNum = 0; for(var i = 3, len = data.length; i < len; i += 4){ if(data[i] === 0){ scrapeNum++; } } if(scrapeNum > area * 0.7){ ctx.clearRect(0, 0, w, h); canvas.removeEventListener('touchmove', moveFunc, false); canvas.removeEventListener('touchend', endFunc, false); } } var init = (function(){ ctx.fillStyle = "#ccc"; ctx.fillRect(0, 0, w, h); randomImg(); img.addEventListener('load', function(){ canvas.style.backgroundImage = 'url(' + img.src +')'; ctx.globalCompositeOperation = 'destination-out'; bindEvent(); }); })(); </script></body></html>下面我就简便暗示一下
首先在页面中我们只只能一个canvas元素
<canvas id="myCanvas" width=300 height=300></canvas>
CSS中的我们所需对canvas的背景图片事先设置好样式
#myCanvas { background-repeat: no-repeat; background-position: center; background-size: 200px 200px;}脚本中我们首先要声明所只需变量
var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), w = canvas.width; h = canvas.height; area = w * h; l = canvas.offsetLeft; t = canvas.offsetTop, img = new Image();借助canvas对象以及它的上下文对象
area变量是为下面的像素点检测所马上
img用来同步进行图片可不载入
最关键的函数在于init初始化函数
var init = (function(){ ctx.fillStyle = "#ccc"; ctx.fillRect(0, 0, w, h); randomImg(); img.addEventListener('load', function(){ canvas.style.backgroundImage = 'url(' + img.src +')'; ctx.globalCompositeOperation = 'destination-out'; bindEvent(); });})();流程如下：
将整个canvas延展灰色图层
随机图片
图片先为查找
复制到天内后，设置图片为canvas背景
翻卡前，设置
ctx.globalCompositeOperation = 'destination-out';为canvas可选监听事件，涂卡
这个globalCompositeOperation才是刮刮乐的关键
关于这个属性的用法可以挥这里
var randomImg = function(){ var random = Math.random(); if(random < 0.4){ img.src = './1.png'; }else if(random > 0.6){ img.src = './2.png'; }else{ img.src = './award.jpg'; }};randomImg函数的功能就是随机图片
随机图片就能够利用Math.random()随机数
canvas我们需COM两个函数
touchmove和touchend
var moveFunc = function(e){ var touch = e.touches[0], posX = touch.clientX - l, posY = touch.clientY - t; ctx.beginPath(); ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0); ctx.fill();};滑动屏幕就要画一个圆
由于设置了destination-out ，所以产生了烧卡的效果
还要注意到，每次接踵而来都要ctx.beginPath();
否则ctx.fill();时会连接起来之前飞入的圆，大面积刮涂
var endFunc = function(e){ var data = ctx.getImageData(0, 0, w, h).data, scrapeNum = 0; for(var i = 3, len = data.length; i < len; i += 4){ if(data[i] === 0){ scrapeNum++; } } if(scrapeNum > area * 0.7){ ctx.clearRect(0, 0, w, h); canvas.removeEventListener('touchmove', moveFunc, false); canvas.removeEventListener('touchend', endFunc, false); }}手张开时，就则会接踵而来touchend
在这个函数中，我们利用了ctx.getImageData()提供了canvas的像素信息
关于这个函数的用法可以撕这里
当灰色图层被刮开后，后面就是canvas的背景
所以我们可以通过假定像素信息RGBA中的A确实为0来假定图层是不是被刮开
scrapeNum就代表被刮开的像素点
所以通过scrapeNum > area * 0.7的正确
当刮开的范围大于总范围的70%时
扫除整个灰色图层
以上就是移动前端Touch事件与H5-Canvas像素点检测做到刮刮乐的内容，更多涉及内容特地关切PHP中文网（www.php.cn）！