淺談HTML5中canvas中的beginPath()和closePath()的重要性

beginPath的做用很簡單，就是開始一段新的路徑，但在使用canvas繪圖的過程當中卻很是重要

先來看一小段代碼：

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

咱們的代碼沒有錯誤，但獲得的倒是兩個邊長100px的黃色的正方形，而不是一綠一黃，這是爲何呢？

事實上，canvas中的繪製方法（fill，stoke），都會以上一次「beginPath」以後的全部路徑進行繪製，在上面的代碼中第一個矩形fill了兩次，第一次綠色，第二次黃色，因此獲得了兩個黃色矩形，一樣的對於畫線段，或其餘曲線，圖形，無論你moveTo到哪，只要你沒有beiginPath，你都是在畫一條路徑。

若是你畫的圖形和你想象的不一致，記得查看一下beginPath。

---

談到beginPath就不得不提一下closePath，事實上二者並沒有關係，closePath的意思是關閉路徑，不是結束路徑，它只是將路徑的終點與起點相連，不是開始一個新路徑。

咱們在上面代碼中第一個fill的後面添加一個closePath，獲得的還是兩個黃色矩形。

但咱們在後面添加一個beginPath，則獲得兩個不一樣顏色的矩形。

總而言之，不要試圖經過閉合一段路徑來開始新的路徑，並且若是你不閉合路徑，即便開始新的路徑，其也不會閉合。