HTML Canvas中fill()方法的正确调用时机：应在closePath()之前还是之后？

嘿，我太懂这种困惑了——当初刚接触Canvas路径API的时候，我也对着这俩方法的顺序纠结了好久！

先直接解答你的疑问：为什么你把fill()放在closePath()前后效果都一样？因为你已经手动把路径闭合了！

看你的代码，最后一行是context.lineTo(0, 0)，这已经把路径的终点拉回了起点（你一开始moveTo(0,0)的位置）。这时候调用closePath()，它的作用是“将当前路径的终点与起点连接起来形成闭合路径”，但你俩点本来就是同一个，所以这个操作等于没做，自然fill()的效果完全一致。

那closePath()到底有啥用？ #

它的核心价值是帮你自动闭合开放路径，不用手动写最后一条lineTo。比如如果你的代码去掉context.lineTo(0, 0)，这时候closePath()就派上用场了：

function draw(context) {
  context.fillStyle = "#FF1010";
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 0);
  context.lineTo(100, 100);
  context.lineTo(0, 100);
  context.closePath(); // 自动把(0,100)和起点(0,0)连起来
  context.fill();
}

这时候的效果和你手动加lineTo(0,0)完全一样，但代码更简洁。

fill()的正确使用方式 #

fill()的规则其实很简单：

• 它填充的是从beginPath()到当前时刻的所有路径段组成的区域
• 不管路径是不是显式用closePath()闭合，fill()都会自动按照Canvas的规则处理：对于开放路径，它会隐式地把终点和起点连起来，形成闭合区域再填充。也就是说，哪怕你既没手动闭合，也没调用closePath()，fill()依然会给你填满整个正方形。

不过这里要注意和stroke()的区别！stroke()不会自动闭合路径：如果你的路径是开放的（没手动闭合也没加closePath()），stroke()只会画出你定义的那些线段，不会补最后一条闭合线。这时候closePath()就会影响绘制结果了。

总结一下 #

1. 如果已经手动闭合了路径（像你代码里那样），closePath()放在fill()前或后都不影响填充效果
2. closePath()更适合用来替代手动的闭合线段，让代码更简洁，同时影响stroke()的绘制结果
3. fill()的正确顺序是：先通过beginPath()开启新路径，定义所有路径段（需要的话用closePath()闭合），最后调用fill()完成填充

内容的提问来源于stack exchange，提问作者Harshal Patil