全国服务热线:4008-888-888

技术知识

Html5完成挪动端、PC端 刮刮卡实际效果

先给大伙儿展现下实际效果图:

刮刮卡要求:

每位客户有3次刮刮卡的机遇
本次刮刮卡的結果会遮盖之前的結果
刮刮卡的中奖概率展现为递增的曲线图(确保3次中务必有1次中奖)
刮出的結果包括按钮既(领到奖品 or 再来1次 )
共享主题活动奖品升級(这里关键是手机微信共享的回调函数了)
大家自身的要求,今日就说如何制做刮刮卡,有这样要求的能够找我要源代码

第1、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">再来1次</span>  
  5.  </div>  
  6.  <canvas id="c1" class="canvas"></canvas>  

这里大家最先建立了1个Canvas,而且在canvas底部再加了刮开后的实际效果。

第2、 网页页面载入后刚开始原始化画布

最先界定1些必须的自变量

XML/HTML Code拷贝內容到剪贴板
  1. var c1; //画布   
  2.  var ctx; //画笔   
  3.  var ismousedown; //标示客户是不是按下电脑鼠标或刚开始触碰   
  4.  var isOk=0; //标示客户是不是早已刮开了1半以上   
  5.  var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是以便不一样辨别率上相互配合@media全自动调整刮的宽度  

网页页面载入后刚开始原始化画布(这模样便可以在网页页面建立1个画布了)

XML/HTML Code拷贝內容到剪贴板
  1. window.onload = function(){    
  2.     c1 = document.getElementById("c1");   
  3.     //这里很重要,canvas自带两个特性width、height,我了解为画布的辨别率,跟style中的width、height实际意义不一样。   
  4.     //最好是设定成跟画布在网页页面中的具体尺寸1样   
  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.  }  

第3、画灰色的矩形框铺满

XML/HTML Code拷贝內容到剪贴板
  1. function initCanvas(){//在网上的做法是给canvas设定1张情况照片,我这里的做法是立即在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("刮1刮",c1.width/2,50);//把这个特性设为这个便可以做出圆形橡皮擦的实际效果   
  11.      //一些老的手机上自带访问器不适用destination-out,下面的编码中有修补的方式   
  12.      ctx.globalCompositeOperation = 'destination-out';}  

第4、电脑鼠标按下 和 触碰刚开始

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

第5、电脑鼠标抬起 和 触碰完毕

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.     //当被刮开的地区等于1半时,则能够刚开始解决結果   
  10.     if(j>=a.data.length/8){   
  11.         isOk = 1;   
  12.     }   
  13.     ismousedown=false;   
  14.  }  

第6、电脑鼠标挪动 和 触碰挪动

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⑴];   
  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度的弧线,便是1个圆,由于设定了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. }  

第7: 假如沒有抽中再来1次

很显著,再来1次便是原始化全部的值,画布再次载入,可是假如有次数限定的要求,尽量在这里测算清晰。

注:因为大家规定的较为多今日就不说如何测算中奖几率的方式了。

以上所述是网编给大伙儿详细介绍的 Html5完成挪动端、PC端 刮刮卡实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服