欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-23 10:35:10
...
这篇文章主要为大家详细介绍了js实现PC端和移动端刮卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js刮卡效果的具体代码，供大家参考，具体内容如下

效果图：

js实现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: #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下面另外放了个p。
        //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" />
    <p class="ggl" id="top">
      <p class="info" id="prize">
        <span id="prompt"></span>
        <span class="btn" id="ok">领取奖品</span>
        <span class="btn" id="no">再来一次</span>
      </p>
      <canvas id="c1" class="canvas"></canvas>
    </p>
    <p class="num">
      您还有<span class="num1"></span>次刮卡机会
    </p>
    <img src="img/guize.png" class="guize" />

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

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多js实现PC端和移动端刮卡效果相关文章请关注PHP中文网！

相关标签： js PC 移动端 刮卡

上一篇： JavaScript随机生成一定位数的密码的实现方法

下一篇： 数据结构-阵列（数组）

推荐阅读