canvas 刮刮卡

最新推荐文章于 2023-06-26 09:36:15 发布

冰-G

最新推荐文章于 2023-06-26 09:36:15 发布

阅读量117

点赞数

分类专栏： canvas 文章标签：前端

本文链接：https://blog.csdn.net/weixin_48956666/article/details/125696934

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>
    .ggk {
      width: 960px;
      height: 680px;
      position: relative;
      margin: 20px auto;
    }

    .ggk img {
      width: 960px;
      height: 675px;
    }

    .ggk #canvas {
      width: 960px;
      height: 680px;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="ggk">
    <img class="img" src="./ggk.jpg" alt="">
    <canvas id="canvas" width="960" height="675"></canvas>
  </div>
  <script>
    let canvas = document.getElementById('canvas')
    // 覆盖图
    ctx = canvas.getContext('2d');
    ctx.fillStyle = 'pink';
    ctx.fillRect(0, 0, 960, 675);
    let ggk = document.querySelector('.ggk')
    // 设置重叠透明
    ctx.globalCompositeOperation = 'destination-out';
    // 鼠标按下且移动
    ggk.onmousedown = () => {
      document.onmousemove = e => {
        ctx.arc(e.clientX-ggk.offsetLeft, e.clientY-ggk.offsetTop, 50, 0, 2 * Math.PI);
        ctx.fill() 
        ctx.closePath();
      }
    }
    // 移除鼠标移动事件
    document.onmouseup = () => {
      document.onmousemove = null
    }
  </script>
</body>
</html>