beginPath的作用很簡(jiǎn)單，就是開(kāi)始一段新的路徑，但在使用canvas繪圖的過(guò)程中卻非常重要

先來(lái)看一小段代碼：

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();

我們的代碼沒(méi)有錯(cuò)誤，但得到的卻是兩個(gè)邊長(zhǎng)100px的黃色的正方形，而不是一綠一黃，這是為什么呢？

事實(shí)上，canvas中的繪制方法（fill，stoke），都會(huì)以上一次“beginPath”之后的所有路徑進(jìn)行繪制，在上面的代碼中第一個(gè)矩形fill了兩次，第一次綠色，第二次黃色，所以得到了兩個(gè)黃色矩形，同樣的對(duì)于畫(huà)線段，或其他曲線，圖形，不管你moveTo到哪，只要你沒(méi)有beiginPath，你都是在畫(huà)一條路徑。

如果你畫(huà)的圖形和你想象的不一致，記得查看一下beginPath。

談到beginPath就不得不提一下closePath，事實(shí)上兩者并無(wú)關(guān)系，closePath的意思是關(guān)閉路徑，不是結(jié)束路徑，它只是將路徑的終點(diǎn)與起點(diǎn)相連，不是開(kāi)始一個(gè)新路徑。

我們?cè)谏厦娲a中第一個(gè)fill的后面添加一個(gè)closePath，得到的仍是兩個(gè)黃色矩形。

但我們?cè)诤竺嫣砑右粋€(gè)beginPath，則得到兩個(gè)不同顏色的矩形。

總而言之，不要試圖通過(guò)閉合一段路徑來(lái)開(kāi)始新的路徑，而且如果你不閉合路徑，即使開(kāi)始新的路徑，其也不會(huì)閉合。

補(bǔ)充：canvas的Beginpath和Closepath理解

beginPath()方法

  var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ;   
 ctx. beginPath ( ) ;   
 ctx. moveTo ( 100.5 , 20.5 ) ;   
 ctx. lineTo ( 200.5 , 20.5 ) ;   
 ctx. stroke ( ) ;   
 ctx. moveTo ( 100.5 , 40.5 ) ;   
 ctx. lineTo ( 200.5 , 40.5 )   
 ctx. strokeStyle = '#f00' ;   
 ctx. stroke ( ) ;  

其中的0.5是為了避免線條模糊問(wèn)題。那么上面的代碼會(huì)得到什么樣的圖形呢？是不是一條黑線一條紅線呢？

從代碼上看，我們的邏輯毫無(wú)問(wèn)題，但結(jié)果是我們得到的是兩條紅線，并不是一黑一紅。

如果你明白這是為什么，那后面的你就不用看了。這就是beginPath的重要性。

canvas中的繪制方法（如stroke,fill），都會(huì)以“上一次beginPath”之后的所有路徑為基礎(chǔ)進(jìn)行繪制。比如上面的代碼里面我stroke了兩次，其實(shí)這兩次都是以第一次beginPath后的所有路徑為基礎(chǔ)畫(huà)的。也就是說(shuō)第一條路徑我們stroke了兩下，第一下是黑的，第二下是紅的，所以最終也是紅的。

1.不管你用moveTo把畫(huà)筆移動(dòng)到哪里，只要不beginPath，那你一直都是在畫(huà)一條路徑。
2.fillRect與strokeRect這種直接畫(huà)出獨(dú)立區(qū)域的函數(shù)，也 不 會(huì)打斷當(dāng)前的path.

如果你畫(huà)出的圖形和你想像的不一樣，記得查看是否有合理的beginPath.

————————————–

說(shuō)到 beginPath ，就不得不提到 closePath ，兩者是不是有很“緊”的聯(lián)系呢？答案是 幾乎沒(méi)有關(guān)系 。

closePath的意思不是結(jié)束路徑，而是 關(guān)閉 路徑，它會(huì)試圖從當(dāng)前路徑的終點(diǎn)連一條路徑到起點(diǎn)，讓整個(gè)路徑閉合起來(lái)。但是，這并不意味著它之后的路徑就是新路徑了！

我們?cè)谏厦娴拇a的第一個(gè)lineTo后面加上closePath，可以發(fā)現(xiàn)還是得到了兩條紅線。

但如果我們?cè)诘谝粋€(gè)stroke后面加上beginPath，則會(huì)如愿得到一條黑線一條紅線。
 

ctx. stroke ( ) ;   
 ctx. beginPath ( ) ; //注意啦！   
 ctx. moveTo ( 100.5 , 40.5 ) ;   
 ctx. lineTo ( 200.5 , 40.5 )   
 ctx. strokeStyle = '#f00' ;   
ctx. stroke ( ) ;  

總而言之，就是 不要企圖通過(guò)閉合現(xiàn)有路徑來(lái)開(kāi)始一條新路徑 ，而開(kāi)始一條新路徑，以前的路徑也不會(huì)閉合。