当前位置：Gxlcms > html代码 > 移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

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

时间：2021-07-01 10:21:17 帮助过：20人阅读


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

手滑动触发刮卡

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

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

  1. <!DOCTYPE html><html lang="en"><head>
  2.     <meta charset="UTF-8">
  3.     <meta content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no" name="viewport">
  4.     <title>Scrape</title>
  5.     <style>
  6.         #myCanvas {            
  7.         background-repeat: no-repeat;            
  8.         background-position: center;            
  9.         background-size: 200px 200px;        
  10.         }
  11.     </style></head><body>
  12.     <canvas id="myCanvas" width=300 height=300></canvas>
  13.     <script>
  14.         var canvas = document.getElementById('myCanvas'),
  15.             ctx = canvas.getContext('2d'),
  16.             w = canvas.width;
  17.             h = canvas.height;
  18.             area = w * h;
  19.             l = canvas.offsetLeft;
  20.             t = canvas.offsetTop,
  21.             img = new Image();        
  22.             var randomImg = function(){
  23.             var random = Math.random();            
  24.             if(random < 0.4){
  25.                 img.src = './1.png';
  26.             }else if(random > 0.6){
  27.                 img.src = './2.png';
  28.             }else{
  29.                 img.src = './award.jpg';
  30.             }
  31.         };        var bindEvent = function(){
  32.             canvas.addEventListener('touchmove', moveFunc, false);
  33.             canvas.addEventListener('touchend', endFunc, false);
  34.         };        var moveFunc = function(e){
  35.             var touch = e.touches[0],
  36.                 posX = touch.clientX - l,
  37.                 posY = touch.clientY - t;
  38.             ctx.beginPath();
  39.             ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
  40.             ctx.fill();
  41.         };        var endFunc = function(e){
  42.             var data = ctx.getImageData(0, 0, w, h).data,
  43.                 scrapeNum = 0;            
  44.                 for(var i = 3, len = data.length; i < len; i += 4){                
  45.                 if(data[i] === 0){
  46.                     scrapeNum++;
  47.                 }
  48.             }            if(scrapeNum > area * 0.7){
  49.                 ctx.clearRect(0, 0, w, h);
  50.                 canvas.removeEventListener('touchmove', moveFunc, false);
  51.                 canvas.removeEventListener('touchend', endFunc, false);
  52.             }
  53.         }        var init = (function(){
  54.             ctx.fillStyle = "#ccc";
  55.             ctx.fillRect(0, 0, w, h);
  56.             randomImg();            
  57.             img.addEventListener('load', function(){
  58.                 canvas.style.backgroundImage = 'url(' + img.src +')';
  59.                 ctx.globalCompositeOperation = 'destination-out';
  60.                 bindEvent();
  61.             });
  62.         })();    </script></body></html>

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

  1. <canvas id="myCanvas" width=300 height=300></canvas>

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

  1. #myCanvas {    
  2. background-repeat: no-repeat;    
  3. background-position: center;    
  4. background-size: 200px 200px;}

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

  1. var canvas = document.getElementById('myCanvas'),
  2.     ctx = canvas.getContext('2d'),
  3.     w = canvas.width;
  4.     h = canvas.height;
  5.     area = w * h;
  6.     l = canvas.offsetLeft;
  7.     t = canvas.offsetTop,
  8.     img = new Image();

获取canvas对象以及它的上下文对象
area变量是为下面的像素点检测所准备
img用来进行图片预加载

最关键的函数在于init初始化函数

  1. var init = (function(){
  2.     ctx.fillStyle = "#ccc";
  3.     ctx.fillRect(0, 0, w, h);
  4.     randomImg();            
  5.     img.addEventListener('load', function(){
  6.         canvas.style.backgroundImage = 'url(' + img.src +')';
  7.         ctx.globalCompositeOperation = 'destination-out';
  8.         bindEvent();
  9.     });
  10. })();

流程如下：

  • 将整个canvas覆盖灰色图层

  • 随机图片

  • 图片预加载

  • 加载完毕后，设置图片为canvas背景

  • 刮卡前，设置ctx.globalCompositeOperation = 'destination-out';

  • 为canvas绑定监听事件，涂卡

这个globalCompositeOperation才是刮刮乐的关键
关于这个属性的用法可以戳这里

  1. var randomImg = function(){
  2.     var random = Math.random();    if(random < 0.4){
  3.         img.src = './1.png';
  4.     }else if(random > 0.6){
  5.         img.src = './2.png';
  6.     }else{
  7.         img.src = './award.jpg';
  8.     }
  9. };

randomImg函数的功能就是随机图片
随机图片就需要利用Math.random()随机数

canvas我们需要绑定两个函数
touchmove和touchend

  1. var moveFunc = function(e){
  2.     var touch = e.touches[0],
  3.         posX = touch.clientX - l,
  4.         posY = touch.clientY - t;
  5.     ctx.beginPath();
  6.     ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
  7.     ctx.fill();};

滑动屏幕就要画一个圆
由于设置了destination-out ，所以产生了刮卡的效果
还要注意，每次触发都要ctx.beginPath();
否则ctx.fill();会连接之前划过的圆，大面积刮涂

  1. var endFunc = function(e){
  2.     var data = ctx.getImageData(0, 0, w, h).data,
  3.         scrapeNum = 0;    
  4.         for(var i = 3, len = data.length; i < len; i += 4){        
  5.         if(data[i] === 0){
  6.             scrapeNum++;
  7.         }
  8.     }    if(scrapeNum > area * 0.7){
  9.         ctx.clearRect(0, 0, w, h);
  10.         canvas.removeEventListener('touchmove', moveFunc, false);
  11.         canvas.removeEventListener('touchend', endFunc, false);
  12.     }
  13. }

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！