画板实现

<body>
    <canvas id="canvas"></canvas>
    <script>
      let canvas = document.getElementById("canvas");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      
      //获取 2d 模型
      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "black";
      ctx.strokeStyle = "none";
      ctx.lineWidth = 10;
      //设置线条末端样式
      ctx.lineCap = "round";

      function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }

      let last;
      let painting = false;
      
      //判断是否为移动端
      var isTouchDevice = "ontouchstart" in document.documentElement;

      if (isTouchDevice) {
        canvas.ontouchstart = (e) => {
          let x = e.touches[0].clientX;
          let y = e.touches[0].clientY;
          last = [x, y];
        };
        canvas.ontouchmove = (e) => {
          let x = e.touches[0].clientX;
          let y = e.touches[0].clientY;

          drawLine(last[0], last[1], x, y);
          last = [x, y];
        };
      }

      canvas.onmousedown = (e) => {
        last = [e.clientX, e.clientY];
        painting = true;
      };

      canvas.onmousemove = (e) => {
        if (painting === true) {
          drawLine(last[0], last[1], e.clientX, e.clientY);
          last = [e.clientX, e.clientY];
        }
      };

      canvas.onmouseup = (e) => {
        painting = false;
      };
    </script>
</body>
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#canvas {
  display: block;
   width:150ppx;
   height:150px;
}

画笔的状态

-   lineWidth 线宽，默认1px
-   lineCap 线末端类型：(butt默认)、round、square
-   lineJoin 相交线的拐点 miter(默认)、round、bevel
-   strokeStyle 线的颜色
-   fillStyle 填充颜色
-   setLineDash() 设置虚线
-   getLineDash() 获取虚线宽度集合
-   lineDashOffset 设置虚线偏移量（负值向右偏移)

canvas 和 svg 的区别

1、Canvas 主要是用笔来绘制 2D 图形的；

2、SVG 主要是用标签来绘制不规则矢量图的；

3、相同点：都是主要用来绘制 2D 图形；

4、不同点：Canvas 画的是位图，一般游戏、统计图形中使用，SVG 画的是矢量图，放大不会失真，适合画地图；

5、不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂；

6、不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现；canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。

canvas 实现简易画板

画板实现

画笔的状态

canvas 和 svg 的区别