Canvas中beginPath()和closePath()的示例分析

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

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

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

<!--html代碼-->
<canvas id="canvas4" width="400px" height="300px"></canvas>

<script>
    var canvas4= document.getElementById("canvas4");
    var content4 = canvas4.getContext("2d");
   
    content4.moveTo(200,150);
    content4.arc(200, 150, 100, 0, Math.PI * 0.3);
    content4.fillStyle = "black";
    content4.fill();
    
    content4.moveTo(200,150);
    content4.arc(200, 150, 100,Math.PI * 0.3,Math.PI * 0.7);
    content4.fillStyle = "yellow";
    content4.fill();
</script>

顯示效果如圖所示：

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

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

第二步：提筆，畫江山

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

<!--html代碼-->
<canvas id="canvas4" width="400px" height="300px"></canvas>

<script>
    var canvas4= document.getElementById("canvas4");
    var content4 = canvas4.getContext("2d");
    content4.beginPath();
    content4.moveTo(200,150);
    content4.arc(200, 150, 100, 0, Math.PI * 0.3);
    content4.fillStyle = "black";
    content4.fill();
    content4.closePath();
    content4.beginPath();
    content4.moveTo(200,150);
    content4.arc(200, 150, 100,Math.PI * 0.3,Math.PI * 0.7);
    content4.fillStyle = "yellow";
    content4.fill();
    content4.closePath();
</script>

正常顯示效果如圖所示：

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

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

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