园龄：5年粉丝：26 关注：9

简单刮刮乐

<!--
 * @Author: HuangBingQuan bingquan111@qq.com
 * @Date: 2022-11-15 17:24:09
 * @LastEditors: HuangBingQuan bingquan111@qq.com
 * @LastEditTime: 2022-11-20 00:36:37
 * @FilePath: /刮刮乐/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="viewport"
      content="
        width=device-width,
        initial-scale=1.0,
        minimum-scale=1.0,
        maximum-scale=1.0,
        user-scalable=no"
    />
    <title>刮刮乐</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .box {
        position: relative;
        width: 400px;
        height: 240px;
        margin: 30px;
      }
      .inner {
        font-size: 60px;
        text-align: center;
        line-height: 240px;
        background: red;
        color: #fff;
      }
      .cvs {
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner">一等奖</div>
      <canvas class="cvs" width="400" height="240">
        您的浏览器不支持请升级浏览器
      </canvas>
    </div>
    <script type="text/javascript">
      let cvs = document.querySelector(".cvs");
      // console.log(cvs)
      let ctx = cvs.getContext("2d");

      // 绘制遮罩层
      ctx.fillStyle = "#00f";
      //填充
      ctx.fillRect(0, 0, cvs.width, cvs.height);
      ctx.lineWidth = 40;

      // 设置线条圆润
      ctx.lineCap = "round";
      ctx.lineJoin = "round";

      // 设置相交之后透明
      ctx.globalCompositeOperation = "destination-out";

      let candraw = false;

      // 鼠标按下
      cvs.onmousedown = (e) => {
        // console.log(`X:${e.offsetX} Y:${e.offsetY}`)
        // 将画笔移动到对应的起点
        ctx.moveTo(e.offsetX, e.offsetY);
        candraw = true;
      };
      // 鼠标移动
      cvs.onmousemove = (ev) => {
        candraw && (ctx.lineTo(ev.offsetX, ev.offsetY), ctx.stroke())
        // 移动过程中设置线条的终点 -- 当前鼠标相对画布的位置
        // ctx.lineTo(ev.offsetX, ev.offsetY);
        // 填充线的颜色 -- 描边
        // ctx.stroke();
      };
      // 鼠标抬起
      // cvs.onmouseup = () => (cvs.onmousemove = null);
      cvs.onmouseup = () => candraw = false
    </script>
  </body>
</html>