demo h5 touch 移动_移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

最近又被支付宝的集福字刷屏了

我到底还是没看到敬业福ค(TㅅT) 心塞

今天给大家带来移动端的刮刮乐实现

效果就是这样的

手滑动触发刮卡

当刮卡面积达到70%以上，自动刮开全部灰色图层

代码不是很多

全部代码就这些

Scrape

下面我就简单说明一下

首先在页面中我们只需要一个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 =