前言

最近在学canvas，正好掘金也在给我推送相关的文章，我也看了很多大佬用canvas写的很有趣的案例，所以我也想试试用canvas写一下涂鸦板。

基本功能

• 画笔
• 橡皮擦
• 自定义画笔粗细和橡皮擦大小
• 清空画板
• 改变画笔颜色

成品：www.dz8545.xyz/#/main/draw（用电脑打开，手机有点小bug）

实现

首先实现的是画笔，要完成的效果是按住鼠标移动在屏幕上画画。其实要实现该功能很简单，因为canvas就是干这个的啊，canvas就是画布嘛。

具体实现：在鼠标按下后，记录该点位置，并将绘制光标移动到该点。之后只要监听鼠标移动事件，并使用lineTo()将绘制光标坐标和鼠标当前位置连起来就行了

document.onmousedown = (event)=>{
            ctx.beginPath()
            ctx.moveTo(event.clientX, event.clientY)
            document.onmousemove = (event)=>{
                ctx.lineTo(event.clientX, event.clientY)
                ctx.stroke()
                
            }
            document.onmouseup = ()=>{  
                document.onmousemove = null
                document.onmouseup = null
            }
        }

再是橡皮擦了，要完成的效果是按住鼠标移动可以将画板上的痕迹擦除。使用clearRect()方法可以擦除画布中某个区域。

具体实现：在鼠标按下后，监听鼠标移动，并使用clearRect()将鼠标当前位置范围擦除

注意：clearRect()擦除的是一个矩形，我们可以将鼠标当前坐标减去我们想要擦除范围的一半作为起点，这样可以使鼠标在橡皮中间，看起来好看点。而且橡皮大小是可以改变的，所以不能写死了，我是使用w来代替

document.onmousedown = (event) => {
    ctx.beginPath();
    ctx.lineWidth = w.value;
    ctx.strokeStyle = color.value;
    const beginX = event.clientX - canvas.offsetLeft;
    const beginY = event.clientY - canvas.offsetTop;
    ctx.moveTo(beginX, beginY);
    document.onmousemove = (event) => {
      const endX = event.clientX - canvas.offsetLeft;
      const endY = event.clientY - canvas.offsetTop;
      switch (k.value) {
        case "画笔":
          ctx.lineTo(endX, endY);
          ctx.stroke();
          break;
        case "橡皮":
          ctx.clearRect(
            endX - w.value,//w.value是擦除范围宽度的一半
            endY - w.value,
            2 * w.value,
            2 * w.value
          );
          break;
        default:
          break;
      }
    };
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

自定义画笔和橡皮大小，其实都不难，画笔大小可以使用lineWidth改变，而橡皮大小也可以通过改变clearRect()中的宽高实现

清空画板，可以使用clearRect(0,0,canvas.width,canvas.heigth)实现（canvas.width是指画板的宽）

改变画笔颜色，可以使用 strokeStyle改变。

至此基本就完成了