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，則得到兩個不同顏色的矩形。

總而言之，不要試圖通過閉合一段路徑來開始新的路徑，而且如果你不閉合路徑，即使開始新的路徑，其也不會閉合。

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的浅谈HTML5中canvas中的beginPath()和closePath()的重要性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。