canvas中beginPath()和closePath()有什么作用-創新互聯

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

創新互聯建站主營河南網站建設的網絡公司,主營網站建設方案,app軟件定制開發,河南h5小程序制作搭建,河南網站營銷推廣歡迎河南等地區企業咨詢

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()有什么作用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯成都網站設計公司行業資訊頻道。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：canvas中beginPath()和closePath()有什么作用-創新互聯
轉載來于：http://m.kartarina.com/article24/cddgje.html

成都網站建設公司_創新互聯，為您提供App開發、移動網站建設、外貿網站建設、網站收錄、靜態網站、用戶體驗

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯