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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>小月博客刮刮卡案例分享</title>
   <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   <style type="text/css">
           *{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       body{
           background: #df412b;
           position: relative;
       }
           .banner1{
           display: block;
           width: 100%;
           height: auto;
           overflow: hidden;
       }
           .ggl{
           position: relative;
           width: 85.6%;
           height: 90px;
           margin: -5px auto;
           background: url(img/ggl.png) no-repeat center center;
           background-size: 100% 100%;
       }
       .canvas{
               position:absolute;
               top:2px;
               left:2.5%;
               width:95%;
               height:82px;
               line-height:82px;
               text-align:center;
               z-index: 2;

           }
           .info{
               position:absolute;
               top:2px;
               left:2.5%;
               width:95%;
               height:82px;
               text-align:center;
           }
           .info span{
               display: block;
               font-size: 18px;
           }
           #prompt{
               line-height: 40px;
           }
           .btn{
               position: relative;
               width: 50%;
               height: 35px;
               line-height: 35px;
               background: #df412b;
               color: #fff;
               border-radius: 5px;
               margin: 0 auto;
               z-index: 1;
           }
           .guize{
               display: block;
               width: 85.6%;
               height: auto;
               margin: 5% auto 10% auto;
               border-radius: 5px;
           }
           .num{
               width: 100%;
               height: 30px;
               line-height: 30px;
               text-align: center;
               font-size:14px;
               margin-top: 5%;
           }
           #ok, #no{display: none;}
           .pop{
               position: fixed;
              left: 0;
              top: 0;
              z-index: 3;
              width: 100%;
              height: 100%;
              background: rgba(0,0,0,0.6);
              display: none;
           }
           .pop img{
               width: 100%;
               height: auto;
               overflow: hidden;
               margin: 15% auto;
           }
   </style>
   </head>
   <body>
       <img src="img/banner1.png" class="banner1"/>
       <div class="ggl" id="top">
           <div class="info" id="prize">
               <span id="prompt"></span>
               <span class="btn" id="ok">领取奖品</span>
               <span class="btn" id="no">再来一次</span>
           </div>
           <canvas id="c1" class="canvas"></canvas>
       </div>
       <div class="num">
           您还有<span class="num1"></span>次刮卡机会
       </div>
       <img src="img/guize.png" class="guize" />

       
       <div class="pop pop1">
           <img src="img/pop1.png" />
       </div>
       <div class="pop pop2">
           <img src="img/pop2.png" id="pop2" />
       </div>
       <script>
           //控制刮卡次数
           var t = 1;
           //初始化所有数据并且随机产生奖品
           var initialize = function () {
               //剩余刮卡次数
               $('.num1').html(4-t);
               //随机数
               function getRandomNum(lbound, ubound) {
                   return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
               }
               var r = getRandomNum(1,100);
               var btn = document.getElementsByClassName("btn");
               for(var i=0; i<btn.length; i++){
                   btn[i].style.zIndex = '1';
               }
               document.getElementById("no").style.display = "none";
               document.getElementById("ok").style.display = "none";

               //初始化涂抹面积
               isOk = 0;


               if(r<t*33){
                   document.getElementById("prompt").innerHTML="恭喜您，中奖了！"
                   var ok =document.getElementById("ok");
                   ok.style.display = "block";
                   //点击领取奖品
                   ok.onclick = function () {
                       window.location.href="prize.html"
                   };
               }else{
                   document.getElementById("prompt").innerHTML="很遗憾，未中奖！"
                   document.getElementById("no").style.display = "block";
               }
           };

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

           /* 页面加载后开始初始化画布 */
           window.onload = function(){
               initialize();
               c1 = document.getElementById("c1");

               //这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。
               //最好设置成跟画布在页面中的实际大小一样
               //不然canvas中的坐标跟鼠标的坐标无法匹配
               c1.width=c1.clientWidth;
               c1.height=c1.clientHeight;
               ctx = c1.getContext("2d");

               //PC端的处理
               c1.addEventListener("mousemove",eventMove,false);
               c1.addEventListener("mousedown",eventDown,false);
               c1.addEventListener("mouseup",eventUp,false);

               //移动端的处理
               c1.addEventListener('touchstart', eventDown,false);
           c1.addEventListener('touchend', eventUp,false);
           c1.addEventListener('touchmove', eventMove,false);

               //初始化
               initCanvas();
           }

           //初始化画布，画灰色的矩形铺满
           function initCanvas(){
               //网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。
               //c1.style.backgroundImage="url(中奖图片.jpg)";
               ctx.globalCompositeOperation = "source-over";
               ctx.fillStyle = '#aaaaaa';
               ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);
               ctx.fill();

               ctx.font = "Bold 30px Arial";
                       ctx.textAlign = "center";
                       ctx.fillStyle = "#999999";
                       ctx.fillText("刮一刮",c1.width/2,50);

               //把这个属性设为这个就可以做出圆形橡皮擦的效果
               //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
               ctx.globalCompositeOperation = 'destination-out';
           }

           //鼠标按下和触摸开始
           function eventDown(e){
               e.preventDefault();
               ismousedown=true;
           }

           //鼠标抬起和触摸结束
           function eventUp(e){
               e.preventDefault();

               //得到canvas的全部数据
               var a = ctx.getImageData(0,0,c1.width,c1.height);
               var j=0;
               for(var i=3;i<a.data.length;i+=4){
                       if(a.data[i]==0)j++;
               }
               //当被刮开的区域等于一半时，则可以开始处理结果
               if(j>=a.data.length/8){
                   isOk = 1;
               }
               ismousedown=false;
           }

           //鼠标移动和触摸移动
           function eventMove(e){
               e.preventDefault();
               if(ismousedown) {
                   if(e.changedTouches){
                       e=e.changedTouches[e.changedTouches.length-1];
                   }
               var topY = document.getElementById("top").offsetTop;
               var oX = c1.offsetLeft,
               oY = c1.offsetTop+topY;

               var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
                   y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

                   //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
                   //画出来是透明的
                   ctx.beginPath();
                   ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);

                   //下面3行代码是为了修复部分手机浏览器不支持destination-out
                   //我也不是很清楚这样做的原理是什么
                   c1.style.display = 'none';
                   c1.offsetHeight;
                   c1.style.display = 'inherit';

                   ctx.fill();
               }

               if(isOk){
                   var btn = document.getElementsByClassName("btn");
                   for(var i=0; i<btn.length; i++){
                       btn[i].style.zIndex = '3';
                   }
                   document.getElementsByClassName("btn")[0].style.zIndex="3";
               }
           }

           //没有中奖再来一次
           $("#no").click(function() {
               if(t>3){
                   //因该弹出遮罩层提示您的次数已经用完了
                   $('.pop1').show();
                   $('.pop1 img').click(function(){
                       $('.pop1').hide();
                   })
               }else{
                   t++;
                   //初始化按钮
                   document.getElementById("no").style.display = "none";
                   document.getElementById("ok").style.display = "none";
                   window.onload();
                   initCanvas();

               }
           });

       </script>

   </body>

</html>

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

猜你喜欢

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