這篇文章帶給大家的內容是關於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，得到兩個不同顏色的矩形。
總而言之，不要試圖透過閉合一段路徑來開始新的路徑，而且如果你不閉合路徑，即使開始新的路徑，其也不會閉合。
以上是canvas中beginPath()和closePath()作用的實例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
