這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)學習HTML5中canvas會遇到的問題，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供屯昌網(wǎng)站建設(shè)、屯昌做網(wǎng)站、屯昌網(wǎng)站設(shè)計、屯昌網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、屯昌企業(yè)網(wǎng)站模板建站服務(wù)，十多年屯昌做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1. 非零環(huán)繞原則(nonzZero rule)

• 非零環(huán)繞原則是canvas在進行填充的時候是否要進行填充的判斷依據(jù)。

• 在判斷填充的區(qū)域拉一條線出來，拉到圖形的外面，這條拉出來的線就是輔助線。判斷繪制的線是否是從輔助線的左邊穿過到輔助線的右邊，此時這種穿過的方式記錄為+1;如果是從輔助線的右邊穿到輔助線的左邊，就記做-1.最后將所有記錄的數(shù)字進行求和，如果求和的結(jié)果為0，代表這塊區(qū)域不要填充，否則，必須填充

• 上面的原理較難理解，可以這樣理解，當在大矩形中繪制小矩形，大矩形的繪制方向與小矩形的繪制方向相同時，填充顏色后，大小矩形都填充相同顏色；大矩形的繪制方向與小矩形的繪制方向相反時，填充顏色后，小矩形不會填充顏色，大矩形與小矩形之間的區(qū)域會填充顏色。

• 大矩形的繪制方向與小矩形的繪制方向相同時的代碼

• 

   1  2  3  4  5  6  7  8  9 10 11 12 28 29 30 

  View Code

• 大矩形的繪制方向與小矩形的繪制方向相同時的效果圖

• 

• 大矩形的繪制方向與小矩形的繪制方向相反時的代碼

• 

   1  2  3  4  5  6  7  8  9 10 11 12 28 29 30 

  View Code

• 大矩形的繪制方向與小矩形的繪制方向相反時效果圖

2. closePath() 與 lineTo()的區(qū)別

• closePath與lineTo閉合是有區(qū)別的,closePath閉合自然，lineTo閉合會有鋸齒,僅在閉合的連接處會有區(qū)別

• 效果圖

• 

• 

   1  2  3  4  5  6  7 14 15 16 17 18 33 34 

  View Code

3. arc繪圖的注意事項

• 使用 arc 繪圖的時候, 如果沒有設(shè)置 moveTo ,那么會從開始繪弧的地方作為起始點，連線到圓弧的起點.

• 如果使用 stroke 方法, 那么會連線到圓弧的起始位置. 如果是 fill 方法, 會自動閉合路徑填充.

• 

   1  2  3  4  5  6 13 14 15 16 41 42 

  View Code

• 效果圖

• 

3.1 解決方法一：使用beginPath()，開啟新的路徑，兩次繪制的圖形就不會相互產(chǎn)生影響

 1  2  3  4  5  6 13 14 15 16 27 28 

View Code

效果圖

3.2 解決方法一：使用moveTo(),將上一個圖形的終點移動到下一個即將繪制的圖形上，就可以解決問題,效果與上面的解決方法相同。但是，該方法只需要使用一次stroke().

 1  2  3  4  5  6 13 14 15 16 26 27 

View Code

3.3  arc的一個小應(yīng)用，繪制圓環(huán)進度條，使用了lineWidth

 1  2  3  4  5  6  7 14 15 16 17 18 51 52 53 

View Code

效果圖

繪圖方法

canvas畫布提供了一個用來作圖的平面空間，該空間的每個點都有自己的坐標，x表示橫坐標，y表示豎坐標。原點(0, 0)位于圖像左上角，x軸的正向是原點向右，y軸的正向是原點向下。

（1）繪制路徑

beginPath方法表示開始繪制路徑，moveTo(x, y)方法設(shè)置線段的起點，lineTo(x, y)方法設(shè)置線段的終點，stroke方法用來給透明的線段著色。

ctx.beginPath(); // 開始路徑繪制

ctx.moveTo(20, 20); // 設(shè)置路徑起點，坐標為(20,20)

ctx.lineTo(200, 20); // 繪制一條到(200,20)的直線

ctx.lineWidth = 1.0; // 設(shè)置線寬

ctx.strokeStyle = '#CC0000'; // 設(shè)置線的顏色

ctx.stroke(); // 進行線的著色，這時整條線才變得可見

moveto和lineto方法可以多次使用。最后，還可以使用closePath方法，自動繪制一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。

（2）繪制矩形

fillRect(x, y, width, height)方法用來繪制矩形，它的四個參數(shù)分別為矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高。fillStyle屬性用來設(shè)置矩形的填充色。

ctx.fillStyle = 'yellow';

ctx.fillRect(50, 50, 200, 100);

strokeRect方法與fillRect類似，用來繪制空心矩形。

ctx.strokeRect(10,10,200,100);

clearRect方法用來清除某個矩形區(qū)域的內(nèi)容。

ctx.clearRect(100,50,50,50);

4. arcTo()的使用

• arcTo繪制圓角，需要線端點，矩形頂點以及另一線段的端點三個參考點

• 

   1  2  3  4  5      6      7     14 15 16 17     18     64 65 66 

  View Code

• 效果圖

• 

上述就是小編為大家分享的學習HTML5中canvas會遇到的問題了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。