关于canvas的beginPath和closePath的使用时机

最近在学canvas，因为后续工作需要用到。

但是有一个疑问，beginPath和closePath一般什么时候会使用到。一开始蛮懵逼的。现在总结一下。

基础概念：

beginPath：是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。

简单来说就是有个路径列表，调用beginPath函数清空之前的路径，再添加新路径，达到创建新路径的效果，这样就不会重复画之前的路径

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

简单来说就是在终点画一条到起点的线

例子：

beginPath：

例1:

 例2：

 例3：

例1和例2没加beginPath之前，执行第一个fill（）就渲染第一个正方形了，执行第二个fill（）时，因为路径列表既有第一个和第二个正方形，所以把第一个正方形再画了一次，还会造成颜色污染。用了beginPath之后，执行第二个fill（）时，路径列表只有第二个正方形，所以完美达到想要的效果。

closePath例子我就不写了，因为很简单，你画两条线，用closePath后你会发现，最后的那个结束点，会画一条线连接到起点。简称闭合。

总结：

（1）beginPath和closePath并不是一对，用哪一个取决于自己的实景业务场景。

（2）beginPath的使用前提是使用了stroe()和fill()不然用了也无意义，closePathd的前提是stroe()。

（3）fill是自动闭合路径的，所以再用closePath是无意义的。