canvas里的beginPath和closePath何时使用？

学canvas的时候，纠结的不是各类图形如何绘制 ，反而是beginPath()和closePath()这两个函数何时用，它们到底作了什么。

首先，这里说的是2D渲染的状况， 即CanvasRenderingContext2D对象（2D渲染上下文， 这个翻译感受好拗口）。

要明确的一点是，用canvas画图的思路：经过绘制路径来绘制图形，路径是一系列点的集合 。PS里有个钢笔工具，跟这个就很像，咱们会先用钢笔工具把路径画出来，而后能够选择填充或者描边。

搞不清楚概念的时候就仔细去看概念：

beginPath()

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 经过清空子路径列表开始一个新路径的方法。 当你想建立一个新的路径时，调用此方法。

在咱们绘制路径的时候，实际上会有一个路径列表帮咱们纪录当前所画的的子路径，而这整一个列表就是咱们当前绘制的路径。那么子路径是什么鬼呢？意思就是好比你东画一条线，西画一条线，中间还画了一条线，这三条线就是子路径，它们没必要首尾相连，能够相交也能够不相交。当你调用beginPath()方法的时候，就会把这整个列表清空，不管你有没有fill()或者stroke()，通通死啦死啦地。

closePath()

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 若是图形已是封闭的或者只有一个点，那么此方法不会作任何操做。

注意，是子路径。这里的定义已经说得比较清楚了，就没什么必要赘述了。

绘制路径

理解了它们的定义后，怎么用的话内心应该也有一个大体的概念了。还有必要说一下moveTo()的定义

CanvasRenderingContext2D.moveTo()是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。

注意，是子路径。因此绘制一条路径（能够包括多条子路径）的规则就是：

1. beginPath()一下

2. 先绘制一条子路径。有必要moveTo()的就moveTo，而后调用相应绘制函数，最后有必要closePath()的就closePath。绘制多条就如法炮制。

3. 填充fill()或者描边stroke(), 或者二者一块儿用。

• 对规则2的解释：为何说有必要moveTo和closePath才作相应的操做呢？closePath好理解，我就是想单纯的画一条路径出来而已，那就不必闭合了。至于moveTo，这取决于你想要画的效果，就是字面的你想从哪一个点开始画呢？好比用arc()画一个扇形，你就得先把起始点移到原点，否则就会画成一个像拱桥的弓形了，点击查看相关实例。

• 对规则3的解释：由于以前画的路径只是纪录了一系列点的位置，并无真正画出来，因此最后要调用函数来渲染

最后，注意有些方法会自动闭合路径，好比fill()和clip()。这也很好理解，由于这两个方法都是做用于一块区域，不闭合的话计算机哪里知道你要对哪块区域进行操做呢？这时候就能够不用调用closePath()了。stroke()不会自动闭合路径。点击查看相关实例。

注：以上api的定义均来自MDN