canvas中beginPath()和closePath()有什么作用

本篇文章為大家展示了canvas中beginPath()和closePath()有什么作用，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

beginPath的作用很簡(jiǎn)單，就是開始一段新的路徑，但在使用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();

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

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

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

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

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

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

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

上述內(nèi)容就是canvas中beginPath()和closePath()有什么作用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。