HTML5 canvas中beginPath()和closePath()的重要性分析

這篇文章主要介紹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，則得到兩個不同顏色的矩形。

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

補充：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是為了避免線條模糊問題。那么上面的代碼會得到什么樣的圖形呢？是不是一條黑線一條紅線呢？

從代碼上看，我們的邏輯毫無問題，但結果是我們得到的是兩條紅線，并不是一黑一紅。

如果你明白這是為什么，那后面的你就不用看了。這就是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 ( ) ;

以上是“HTML5 canvas中beginPath()和closePath()的重要性分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！