前端实现刮刮乐效果

(()=>{})()

已于 2025-04-07 16:13:12 修改

阅读量341

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端

于 2025-04-07 16:09:24 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48393475/article/details/147046193

技术：HTML 、CSS、Canvas

talk is cheap,show me the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        position: absolute;
        top: 0;
        border-radius: 20px;
      }
      div {
        width: 300px;
        height: 200px;
        background-color: rgb(125, 56, 56);
        text-align: center;
        line-height: 200px;
        font-size: 66px;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <div>¥100</div>
    <script>
      const canvas = document.createElement("canvas");
      document.body.appendChild(canvas);
      canvas.height = 200;
      canvas.width = 300;
      const ctx = canvas.getContext("2d");

      ctx.beginPath();
      ctx.fillStyle = "#ccc";
      ctx.fillRect(0, 0, 300, 200);

      ctx.globalCompositeOperation = "destination-out";

      ctx.beginPath();
      ctx.lineWidth = 20;

      canvas.onmousedown = function (e) {
        ctx.moveTo(e.offsetX, e.offsetY);

        canvas.onmousemove = function (e) {
          ctx.lineTo(e.offsetX, e.offsetY);
          ctx.stroke();
        };
        canvas.onmouseout = function () {
          canvas.onmousemove = null;
        };
      };
    </script>
  </body>
</html>

效果如图：

效果仅需要基础知识，不涉及复杂逻辑。目的在于提供思路。后面会在评论区附上前端h5实现定制化取景框拍照。