【案例简介】

js实现随机中奖特效demo

【案例截图】

【核心代码】

 <script type="text/javascript">
      var bodyStyle = document.body.style;

      bodyStyle.mozUserSelect = "none";
      bodyStyle.webkitUserSelect = "none";

      var img = new Image();
      var canvas = document.querySelector("#canvas");

      canvas.style.position = "absolute";
      var imgs = ["p_0.jpg", "p_1.jpg"];
      var num = Math.floor(Math.random() * 2);
      img.src = imgs[num];

      img.addEventListener("load", function(e) {
        var ctx;
        var w = img.width,
          h = img.height;
        var offsetX = canvas.offsetLeft,
          offsetY = canvas.offsetTop;
        var mousedown = false;

        function eventDown(e) {
          e.preventDefault();
          mousedown = true;
        }

        function eventUp(e) {
          e.preventDefault();
          mousedown = false;
        }

        function eventMove(e) {
          e.preventDefault();
          if (mousedown) {
            if (e.changedTouches) {
              e = e.changedTouches[0];
            }
            var x =
                (e.clientX + document.body.scrollLeft || e.pageX) - offsetX ||
                0,
              y =
                (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
            with (ctx) {
              beginPath();
              arc(x, y, 10, 0, Math.PI * 2);
              fill();
            }
          }
          handleFilledPercentage(getFilledPercentage());
        }
        // 计算已经刮过的区域占整个区域的百分比
        function getFilledPercentage() {
          let imgData = ctx.getImageData(0, 0, w, h);
          // imgData.data是个数组，存储着指定区域每个像素点的信息，数组中4个元素表示一个像素点的rgba值
          let pixels = imgData.data;
          let transPixels = [];
          for (let i = 0; i < pixels.length; i += 4) {
            // 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，
            // 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了
            if (pixels[i + 3] < 128) {
              transPixels.push(pixels[i + 3]);
            }
          }
          return (
            ((transPixels.length / (pixels.length / 4)) * 100).toFixed(2) + "%"
          );
        }
        // 设置阈值，去除灰色涂层
        function handleFilledPercentage(percentage) {
          percentage = percentage || 0;
          if (parseInt(percentage) > 50) {
            // 当像素点的个数超过  50% 时，清空画布，显示底图
            ctx.clearRect(0, 0, w, h);
          }
        }