這篇文章主要介紹了Canvas中beginPath()和closePath()的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、肥東網(wǎng)絡(luò)推廣、成都小程序開發(fā)、肥東網(wǎng)絡(luò)營銷、肥東企業(yè)策劃、肥東品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供肥東建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

在學(xué)習(xí)H5新元素的時候，了解到了畫布canvas：可以在網(wǎng)頁中繪制所需要的圖形；其中在描繪扇形圖時發(fā)現(xiàn)了關(guān)于beginPath（）和closePath（）的問題，在接下來將會進(jìn)行分析和總結(jié)；

第一步：提畫筆，點江山

顯示效果如圖所示：

分析：
從顯示效果上可以看出，根本沒有顯示出應(yīng)該有的效果；第一塊應(yīng)該是黑色，第二塊應(yīng)該是黃色。
此時需要提及beginPath和closePath的重要作用了；
不著急我們先一步一步分析為什么需要上面兩個方法：
1：moveTo(x,y)表示移動畫筆到（x，y）位置，同時也是定義線條開始的位置，如果沒有moveTo方法，那么就連扇形也不是了，直接是一個小月牙；
顯示效果如圖所示：

2：在使用canvas進(jìn)行繪制的時候，畫筆每一次都是從beginPath（）開始繪制的，如果在當(dāng)前起點找不到就繼續(xù)向上找，直到找到為止，然后從beginPath（）之后開始繪制，因此這才會出現(xiàn)上述的前一個扇形被后一個扇形所覆蓋，只留下一個黑邊在苦苦掙扎  -_-
3：fillRect()和storkeRect() 這種畫出獨立區(qū)域的方法，也不能打斷當(dāng)前路徑，也就是說，他也不能夠替代closePath（）【關(guān)閉路徑】的作用；
4：beginPath（）和closePath（）必須要成對出現(xiàn)！因為你如果想通過閉合一段路徑來開始新的路徑那么開始的路徑也不會是新的路徑。

第二步：提筆，畫江山

以點為面，補充，堆積成畫；

正常顯示效果如圖所示：

關(guān)于畫布的注意事項

1：畫布的默認(rèn)寬高是300 * 150 ；
2：想要設(shè)置畫布的寬高就必須使用行內(nèi)屬性來進(jìn)行設(shè)置，而不是style；否則就算是從視覺上改變了畫布的尺寸，他實際上還是不會改變，里面的內(nèi)容就會產(chǎn)生變形；
3：在canvas上畫之前一定要先創(chuàng)建出context上下文對象之后再使用context對象調(diào)用畫布的屬性和方法進(jìn)行操縱；
4：canvas中沒有畫圓形的方法或者屬性，但存在畫弧線的方法arc（），可以用它來畫一個2PI的扇形即圓；
5：beginPath（）和closePath（）非常重要，如果你的canvas中的顯示看起來不正確，請一定先檢查是否正確的使用了beginPath（）和closePath（）；

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Canvas中beginPath()和closePath()的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文標(biāo)題：Canvas中beginPath()和closePath()的示例分析-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://weahome.cn/article/degjsi.html