canvas vscode 个性签名![image.png](https://p1-juejin.byteimg.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    canvas {
      border: 1px solid;
    }
  </style>
  <body>
    <canvas width="300" height="200"></canvas>
    <p>
      <button id="clear">清除</button>
      <button id="save">保存</button>
    </p>
  </body>
  <script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");
    let flag = false;

    //鼠标按下
    canvas.addEventListener("mousedown", (e) => {
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);
      flag = true;
    });
    //鼠标移动
    canvas.addEventListener("mousemove", (e) => {
      if (!flag) return;
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.strokeStyle = "red";
      ctx.stroke();
    });

    //鼠标离开
    canvas.addEventListener("mouseup", () => {
      flag = false;
    });

    //清除
    document.querySelector("#clear").addEventListener("click", () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });

    //保存
    document.querySelector("#save").addEventListener("click", () => {
      let result = canvas.toDataURL();
      console.log(result);
    });
  </script>
</html>