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