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

来源：互联网发布：淘宝手绘照片是真的吗编辑：程序博客网时间：2024/05/17 15:56

最近又被支付宝的集福字刷屏了
我到底还是没看到敬业福ค(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%时
清除整个灰色图层

==主页传送门==

5 2