移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
Posted 刻刻帝丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端Touch事件与H5-Canvas像素点检测实现刮刮乐相关的知识，希望对你有一定的参考价值。
tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و
最近又被支付宝的集福字刷屏了
我到底还是没看到敬业福ค(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我们需要绑定两个函数
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%时
清除整个灰色图层
[==主页传送门==](http://blog.csdn.net/q1056843325)
以上是关于移动端Touch事件与H5-Canvas像素点检测实现刮刮乐的主要内容，如果未能解决你的问题，请参考以下文章