js实现PC端和移动端刮卡效果

2019/6/27 21:10:45
编程Tag： js 移动端 PC 刮卡
本文主要是介绍js实现PC端和移动端刮卡效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
本文实例为大家分享了js刮卡效果的具体代码，供大家参考，具体内容如下
效果图：
具体代码：
<!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: #E34830;
        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%;
        border: 1px solid blue;
      }

      .canvas {
        position: absolute;
        top: 2px;
        left: 2.5%;
        width: 95%;
        height: 82px;
        line-height: 82px;
        text-align: center;
        z-index: 2;
        border: 1px solid black;
      }

      .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;
        border: 1px solid black;
      }

      .num {
        width: 90%;
        margin: 0 auto;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        margin-top: 5%;
        border: 1px solid black;
      }

      #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>
    <script>
      //控制刮卡次数
      var t = 0;
      //初始化所有数据并且随机产生奖品
      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>
  </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" />

    <!-- 遮罩层1抽奖次数已经用完-->
    <div class="pop pop1">
      <img src="img/pop1.png" />
    </div>
    <div class="pop pop2">
      <img src="img/pop2.png" id="pop2" />
    </div>
  </body>

</html>
源码下载：js刮卡效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持找一找教程网。
这篇关于js实现PC端和移动端刮卡效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
js实现PC端和移动端刮卡效果

相关编程文章
