1. 首页
  2. 文章中心
  3. HTML5

Html5实现移动端、PC端 刮刮卡效果

200 阅读 0 评论
我是靠谱客的博主 迷路烤鸡，最近开发中收集的这篇文章主要介绍 Html5实现移动端、PC端 刮刮卡效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先给大家展示下效果图：

刮刮卡需求：

每一位用户有三次刮刮卡的机会
本次刮刮卡的结果会覆盖上次的结果
刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）
刮出的结果包含按钮既（领取奖品 or 再来一次 ）
分享活动奖品升级（这里主要是微信分享的回调了）
我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码

第一、body创建Canvas

XML/HTML Code复制内容到剪贴板
  1. <div class="info" id="prize">  
  2.      <span id="prompt"></span>  
  3.      <span class="btn" id="ok">领取奖品</span>  
  4.     <span class="btn" id="no">再来一次</span>  
  5.  </div>  
  6.  <canvas id="c1" class="canvas"></canvas>  

这里我们首先创建了一个Canvas，并且在canvas底部加上了刮开后的效果。

第二、 页面加载后开始初始化画布

首先定义一些需要的变量

XML/HTML Code复制内容到剪贴板
  1. var c1; //画布   
  2.  var ctx; //画笔   
  3.  var ismousedown; //标志用户是否按下鼠标或开始触摸   
  4.  var isOk=0; //标志用户是否已经刮开了一半以上   
  5.  var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是为了不同分辨率上配合@media自动调节刮的宽度  

页面加载后开始初始化画布（这样子就可以在页面创建一个画布了）

XML/HTML Code复制内容到剪贴板
  1. window.onload = function(){    
  2.     c1 = document.getElementById("c1");   
  3.     //这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。   
  4.     //最好设置成跟画布在页面中的实际大小一样   
  5.     //不然canvas中的坐标跟鼠标的坐标无法匹配   
  6.     c1c1.width=c1.clientWidth;   
  7.     c1c1.height=c1.clientHeight;   
  8.     ctx = c1.getContext("2d");   
  9.     //PC端的处理   
  10.     c1.addEventListener("mousemove",eventMove,false);   
  11.     c1.addEventListener("mousedown",eventDown,false);   
  12.     c1.addEventListener("mouseup",eventUp,false);   
  13.     //移动端的处理   
  14.     c1.addEventListener('touchstart', eventDown,false);   
  15.     c1.addEventListener('touchend', eventUp,false);   
  16.     c1.addEventListener('touchmove', eventMove,false);   
  17.     //初始化   
  18.     initCanvas();   
  19.  }  

第三、画灰色的矩形铺满

XML/HTML Code复制内容到剪贴板
  1. function initCanvas(){//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div   
  2.      //c1.style.backgroundImage="url(中奖图片.jpg)";   
  3.      ctx.globalCompositeOperation = "source-over";   
  4.      ctx.fillStyle = '#aaaaaa';   
  5.      ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);   
  6.      ctx.fill();   
  7.      ctx.font = "Bold 30px Arial";   
  8.                  ctx.textAlign = "center";   
  9.                  ctx.fillStyle = "#999999";   
  10.                  ctx.fillText("刮一刮",c1.width/2,50);//把这个属性设为这个就可以做出圆形橡皮擦的效果   
  11.      //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法   
  12.      ctx.globalCompositeOperation = 'destination-out';}  

第四、鼠标按下 和 触摸开始

XML/HTML Code复制内容到剪贴板
  1. function eventDown(e){   
  2.     e.preventDefault();   
  3.     ismousedown=true;}  

第五、鼠标抬起 和 触摸结束

XML/HTML Code复制内容到剪贴板
  1. function eventUp(e){   
  2.     e.preventDefault();   
  3.     //得到canvas的全部数据   
  4.     var a = ctx.getImageData(0,0,c1.width,c1.height);   
  5.     var j=0;   
  6.     for(var i=3;i<a.data.length;i+=4){   
  7.         if(a.data[i]==0)j++;   
  8.     }   
  9.     //当被刮开的区域等于一半时，则可以开始处理结果   
  10.     if(j>=a.data.length/8){   
  11.         isOk = 1;   
  12.     }   
  13.     ismousedown=false;   
  14.  }  

第六、鼠标移动 和 触摸移动

XML/HTML Code复制内容到剪贴板
  1. //鼠标移动 和 触摸移动   
  2. function eventMove(e){   
  3.     e.preventDefault();   
  4.     if(ismousedown) {   
  5.         if(e.changedTouches){   
  6.             ee=e.changedTouches[e.changedTouches.length-1];   
  7.         }   
  8.         var topY = document.getElementById("top").offsetTop;   
  9.         var oX = c1.offsetLeft,   
  10.         oY = c1.offsetTop+topY;   
  11.         var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,   
  12.         y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;   
  13.         //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';   
  14.         //画出来是透明的   
  15.         ctx.beginPath();   
  16.         ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);   
  17.         //下面3行代码是为了修复部分手机浏览器不支持destination-out   
  18.         //我也不是很清楚这样做的原理是什么   
  19.         c1.style.display = 'none';   
  20.         c1.offsetHeight;   
  21.         c1.style.display = 'inherit';    
  22.         ctx.fill();   
  23.     }   
  24.     if(isOk){   
  25.         var btn = document.getElementsByClassName("btn");   
  26.             for(var i=0; i<btn.length; i++){   
  27.                 btn[i].style.zIndex = '3';   
  28.             }   
  29.             document.getElementsByClassName("btn")[0].style.zIndex="3";   
  30.     }   
  31. }  

第七： 如果没有抽中再来一次

很明显，再来一次就是初始化所有的值，画布重新加载，但是如果有次数限制的需求，务必在这里计算清楚。

注：由于我们要求的比较多今天就不说怎么计算中奖概率的方法了。

以上所述是小编给大家介绍的 Html5实现移动端、PC端 刮刮卡效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

最后

以上就是迷路烤鸡为你收集整理的 Html5实现移动端、PC端 刮刮卡效果的全部内容，希望文章能够帮你解决 Html5实现移动端、PC端 刮刮卡效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(132)

相关文章

vsFTPd 服务器初学者指南
vsFTPd 服务器初学者指南
ps怎么绘制水彩晕染效果的图案?
ps怎么绘制水彩晕染效果的图案?
jQuery实现字符串全部替换的方法
jQuery实现字符串全部替换的方法
JavaScript中的正则表达式简明总结
JavaScript中的正则表达式简明总结
Html5实现移动端、PC端 刮刮卡效果
Html5实现移动端、PC端 刮刮卡效果
Bootstrap3制作搜索框样式的方法
Bootstrap3制作搜索框样式的方法
淘宝SEO优化需要注意十大违规雷区 尽量远离“高压线”
淘宝SEO优化需要注意十大违规雷区 尽量远离“高压线”
php简单获取复选框值的方法
php简单获取复选框值的方法

评论列表共有 0 条评论

立即
投稿
返回
顶部