这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

🍕 绘制路径

路径是通过绘制指令来连接一系列的点，由这一系列的点构成直线或曲线。路径可以用于在HTML5 canvas上绘制各种类型的图形：直线、圆形、多边形等等

ctx的获取在上篇文章有详细描述，这里就不说啦👵🏻👵🏻👵🏻

      //  设置填充颜色
      ctx.fillStyle = "yellow"

      //  绘制路径
      // 点下的第1个点
      ctx.moveTo(100,100);
      // 点下的第2、3、4......个点
      ctx.lineTo(200,200);
      ctx.lineTo(300, 200);
      ctx.lineTo(100, 100);
      // 让点下的点进行连接
      ctx.stroke();
      // 对路径进行填充
      ctx.fill();

🍟 beginPath & closePath

beginPath() 方法开始一条路径，或重置当前的路径,不使用的话会改变之前路径的样式; closePath() 方法创建从当前点到开始点的路径，结束绘制路径。

当我们绘制两个三角形，只填充第2个，当我们不使用beginPath和closePath时，会发现两个三角形都被填充了

      // 绘制第一个三角形
      ctx.moveTo(100,100);
      ctx.lineTo(200,200);
      ctx.lineTo(300, 200);
      ctx.lineTo(100, 100);
      ctx.stroke();
      // 绘制第二个三角形
      ctx.moveTo(100,200);
      ctx.lineTo(200,300);
      ctx.lineTo(300, 300);
      ctx.lineTo(100, 200);
      ctx.stroke();
      // 进行填充
      ctx.fill();

但是我们使用beginPath和closePath可以让绘制图形成为一块独立的区间，closePath可以自动对图形进行闭合

ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.lineTo(300, 200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(200,300);
    ctx.lineTo(300, 300)
ctx.closePath();
ctx.stroke();
ctx.fill();

🍟 save & restore

save()和restore()是用来保存和恢复canvas状态的，把操作作为一个独立的作用域，样式就只会在这个作用域里面起作用。 beginPath和closePath只是把图形作为一个独立的图形

ctx.save();
    ctx.strokeStyle = 'red'
    ctx.beginPath();
        ctx.strokeRect(55, 55, 100, 100);
    ctx.closePath();
ctx.restore();

ctx.beginPath();
    ctx.strokeRect(105, 105, 100, 100);
ctx.closePath();

当不使用时，这两个正方形的边框都是红色的，但是使用了save()和restore()后，ctx.strokeStyle = 'red'的作用范围就只在第一个正方形里面了

🍔 画圆

ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

const drawCircle = (ctx, cx, cy, r) => {
    ctx.save()
    ctx.beginPath()
    
    ctx.strokeStyle = 'yellow'
    ctx.lineWidth = 3
    ctx.arc(cx, cy, r, 0, 2 * Math.PI)
    ctx.stroke()
    
    ctx.closePath()
    ctx.restore()
}
// 画一个中心点在（100，100），半径20的圆
drawCircle(ctx, 100, 100, 20);