移动端Touch事件与H5-Canvas像素点检测实现刮刮乐-H5 Tutorial-php.cn

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

黄舟

Release： 2017-02-27 15:28:06

Original

2083 people have browsed it

最近又被支付宝的集福字刷屏了
我到底还是没看到敬业福ค(TㅅT) 心塞
今天给大家带来移动端的刮刮乐实现
效果就是这样的

手滑动触发刮卡

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

代码不是很多
全部代码就这些


    
    
    Scrape

Copy after login

下面我就简单说明一下
首先在页面中我们只需要一个canvas元素

Copy after login

CSS中的我们需要对canvas的背景图片事先设置好样式

#myCanvas {    
background-repeat: no-repeat;    
background-position: center;    
background-size: 200px 200px;}

Copy after login

脚本中我们首先要声明所需变量

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();

Copy after login

获取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();
    });
})();

Copy after login

流程如下：

将整个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';
    }
};

Copy after login

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();};

Copy after login

滑动屏幕就要画一个圆
由于设置了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);
    }
}

Copy after login

手抬起时，就会触发touchend
在这个函数中，我们利用了ctx.getImageData()获取了canvas的像素信息
关于这个函数的用法可以戳这里
当灰色图层被刮开后，后面就是canvas的背景
所以我们可以通过判断像素信息RGBA中的A是否为0来判断图层是否被刮开
scrapeNum就代表被刮开的像素点
所以通过scrapeNum > area * 0.7的判断
当刮开的范围大于总范围的70%时
清除整个灰色图层

以上就是移动端Touch事件与H5-Canvas像素点检测实现刮刮乐的内容，更多相关内容请关注PHP中文网（www.php.cn）！