beginPath的作用很簡單，就是開始一段新的路徑，但在使用canvas繪圖的過程中卻非常重要
先來看一小段程式碼：
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle=green; ctx.fill(); ctx.ect(0,000x); .fillStyle=yellow; ctx.fill();
我們的程式碼沒有錯誤，但得到的卻是兩個邊長100px的黃色的正方形，而不是一綠一黃，這是為什麼呢？
事實上，canvas中的繪製方法（fill，stoke），都會以上一次beginPath之後的所有路徑進行繪製，在上面的代碼中第一個矩形fill了兩次，第一次綠色，第二次黃色，所以得到了兩個黃色長方形，同樣的對於畫線段，或其他曲線，圖形，不管你moveTo到哪，只要你沒有beiginPath，你都是在畫一條路徑。
如果你畫的圖形和你想像的不一致，記得查看beginPath。
談到beginPath就得提一下closePath，事實上兩者並無關係，closePath的意思是關閉路徑，不是結束路徑，它只是將路徑的終點與起點相連，不是開始一個新路徑。
我們在上面程式碼中第一個fill的後面加上一個closePath，得到的仍是兩個黃色矩形。
但我們在後面加上一個beginPath，得到兩個不同顏色的矩形。
總而言之，不要試圖透過閉合一段路徑來開始新的路徑，而且如果你不閉合路徑，即使開始新的路徑，其也不會閉合。
補充：canvas的Beginpath和Closepath理解beginPath()方法
var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 100.5 , 20.5 ) ; ctx. lineTo ( 200.5 , ctx. . moveTo ( 100.5 , 40.5 ) ; ctx. lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ; ctx. stroke ( ) ;
其中的0.5是為了避免線條模糊問題。那麼上面的程式碼會得到什麼樣的圖形呢？是不是一條黑線一條紅線呢？
從程式碼上看，我們的邏輯毫無問題，但結果是我們得到的是兩條紅線，並不是一黑一紅。
如果你明白這是為什麼，那後面的你就不用看了。這就是beginPath的重要性。
canvas中的繪製方法（如stroke,fill），都會以上一次beginPath之後的所有路徑為基礎進行繪製。例如上面的程式碼裡面我stroke了兩次，其實這兩次都是以第一次beginPath後的所有路徑為基礎畫的。也就是說第一條路徑我們stroke了兩下，第一下是黑的，第二下是紅的，所以最後也是紅的。
1.不管你用moveTo把畫筆移到哪裡，只要不beginPath，那你一直都是在畫一條路徑。
2.fillRect與strokeRect這種直接畫出獨立區域的函數，也不會打斷目前的path.
如果你畫出的圖形和你想像的不一樣，記得查看是否有合理的beginPath.
------–
說到beginPath ，就不得不提到closePath ，兩者是不是有很緊的連結呢？答案是幾乎沒有關係。
closePath的意思不是結束路徑，而是關閉路徑，它會試圖從當前路徑的終點連一條路徑到起點，讓整個路徑閉合起來。但是，這並不意味著它之後的路徑就是新路徑了！
我們在上面的程式碼的第一個lineTo後面加上closePath，可以發現還是得到了兩條紅線。
但如果我們在第一個stroke後面加上beginPath，我們會如願得到一條黑線一條紅線。
ctx. stroke ( ) ; ctx. beginPath ( ) ; //注意啦！ ctx. moveTo ( 100.5 , 40.5 ) ; ctx. lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ; ctx. stroke ( ) ;
總而言之，就是不要企圖透過閉合現有路徑來開始一條新路徑，而開始一條新路徑，以前的路徑也不會閉合。