一、文字版

分为画板、奖品区、提示文字三部分
画板填充涂层，鼠标按下移动时清除15*15矩形，以达到视觉效果的刮涂层
在鼠标抬起时清除移动事件
奖品区随机展示一个奖品结果，利用css层级，隐藏在涂层之下

xml 复制代码

<!DOCTYPE html>
<html lang="ch-en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>刮刮乐</title>
</head>
<body>
  <div class="box">
    <canvas width="300" height="150" id="canvas"></canvas>
    <div class="prize"></div>
    <div class="prompt">刮奖区</div>
  </div>
</body>
<script>
  window.onload = () => {
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    //绘制矩形，填充涂层
    ctx.fillStyle = '#999';
    ctx.fillRect(0, 0, 300, 150);
    //按下且移动事件
    canvas.onmousedown = (e) => {
      canvas.onmousemove = (e2) => {
        let x = e2.clientX
        let y = e2.clientY;
        // 清除一个15*15的矩形区域
        ctx.clearRect(x, y, 15, 15);
      }
    }
    //清除移动事件
    canvas.onmouseup = (e) => {
      canvas.onmousemove = null;
    }
    // 随机奖品
    var arr = ["奖品1", "奖品2", "奖品3", "奖品4"];
    var i = Math.floor(Math.random() * arr.length);
    document.getElementsByClassName("prize")[0].innerText = arr[i];
  }
</script>
<style>
  .box {
    width: 300px;
    height: 200px;
    position: relative;
  }
  .prize {
    position: absolute;
    width: 300px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 30px;
    color: red;
  }
  #canvas {
    border: 1px solid #000;
    position: absolute;
    z-index: 2;
  }
  .prompt {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

</html>

二、图片版

分为画板、图片区、提示文字三部分
画板填充涂层，鼠标按下移动时清除15*15矩形，以达到视觉效果的刮涂层
在鼠标抬起时清除移动事件
奖品区随机展示一张图片，利用css层级，隐藏在涂层之下

xml 复制代码

<!DOCTYPE html>
<html lang="ch-en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>刮刮乐</title>
</head>
<body>
  <div class="box">
    <canvas width="300" height="150" id="canvas"></canvas>
    <img class="prize" src="" alt="">
    <div class="prompt">刮奖区</div>
  </div>
</body>
<script>
  window.onload = () => {
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    //绘制矩形，填充涂层
    ctx.fillStyle = '#999';
    ctx.fillRect(0, 0, 300, 150);
    //按下且移动事件
    canvas.onmousedown = (e) => {
      canvas.onmousemove = (e2) => {
        let x = e2.clientX
        let y = e2.clientY;
        // 清除一个15*15的矩形区域
        ctx.clearRect(x, y, 15, 15);
      }
    }
    //清除移动事件
    canvas.onmouseup = (e) => {
      canvas.onmousemove = null;
    }
    // 随机奖品
    var arr = ["https://p3.itc.cn/q_70/images03/20210531/ee932a2f55ba444e80320227b2e79a3a.jpeg", "http://gd-hbimg.huaban.com/28ea2e5cf17173f84ef74064e95627cc3ba75fe627e71-hKNgS4_fw658", "https://c-ssl.dtstatic.com/uploads/item/201202/23/20120223143146_xRHZy.thumb.1000_0.jpg", "http://hbimg.huaban.com/373229144a51bff1d78b09fd539a51d73d71d5c53ca80-qzvIEH_fw658"];
    var i = Math.floor(Math.random() * arr.length);
    console.log(arr[i]);
    document.querySelector('.prize').src = arr[i]
  }
</script>
<style>
  .box {
    width: 300px;
    height: 200px;
    position: relative;
  }
  .prize {
    position: absolute;
    width: 300px;
    height: 150px;
  }
  #canvas {
    border: 1px solid #000;
    position: absolute;
    z-index: 2;
  }
  .prompt {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

</html>

canvas实现刮刮乐

一、文字版

二、图片版