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

為夏縣等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及夏縣網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、夏縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

第一步：提畫(huà)筆，點(diǎn)江山

顯示效果如圖所示：

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

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

第二步：提筆，畫(huà)江山

以點(diǎn)為面，補(bǔ)充，堆積成畫(huà)；

正常顯示效果如圖所示：

關(guān)于畫(huà)布的注意事項(xiàng)

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

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