简单刮刮乐

<!--
 * @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>

原文地址：http://www.cnblogs.com/bingquan1/p/16923741.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性