使用HTML5繪制扇形的一種方法

湖北三峽職業(yè)技術(shù)學(xué)院 周蘇峽

本文介紹使用HTML5的Canvas畫布繪制扇形的一種方法，其實(shí)現(xiàn)思路是利用中畫筆的ARC方法進(jìn)行弧線所圍區(qū)域的填充來實(shí)現(xiàn)扇形的繪制，所附的代碼通用性強(qiáng)，對圓形、小于180°扇形、半圓形及大于180°扇形的繪制均能實(shí)現(xiàn)，能比較方便地完成在Web頁面前端的動態(tài)繪圖。

1 ARC方法的定義

我們知道在HTML5中可以使用Canvas畫布標(biāo)簽進(jìn)行圖形繪制，當(dāng)定義了一個畫筆后，可以調(diào)用其ARC

方法實(shí)現(xiàn)圓形區(qū)域的填充，格式如下：

ARC（圓心x坐標(biāo)，圓心y坐標(biāo)，半徑，弧線起點(diǎn)，弧線終點(diǎn)，順時鐘False|逆時鐘True）

該填充是從弧線起點(diǎn)到弧線終點(diǎn)所走的弧線與起點(diǎn)到終點(diǎn)的連線所圍起來的面積的繪制。由于從起點(diǎn)到終點(diǎn)所走弧線有順時鐘和逆時鐘兩個方向，所以當(dāng)繪制的不是一個完整的正圓時，兩個方向繪制的形狀填充（圖中黑色區(qū)域）是不同的，分別如圖1和圖2所示。

圖1 0到90度順時鐘填充Fig.1 0 to 90 degrees clockwise

圖2 0到90度逆時鐘繪制Fig.2 Reverse the clock drawing 0 to 90 degrees

2 利用ARC方法繪制扇形的思路

2.1 進(jìn)行小于180°的扇形填充

參考圖1可以看出，通過執(zhí)行下面一段JavaScript代碼，其中循環(huán)變量r控制欲繪制的扇形的半徑，

每循環(huán)一次取一個半徑值，就利用Context（2d畫筆）對象的ARC方法順時鐘方向填充一次，然后半徑減1并重復(fù)這樣的填充，直到半徑減到0（縮小到圓心處）為止，從而可以完成一個小于180°的扇形區(qū)域的填充。假如起始角度是0，終止角度是90°，執(zhí)行下面的JavaScript代碼進(jìn)行扇形的繪制，顯示結(jié)果如圖3所示，程序代碼正確。

圖3 0到90度的順時鐘方向扇形填充Fig.3 0 to 90 degrees clockwise direction fan filling

2.2 進(jìn)行大于180°的扇形填充

要繪制大于180°的扇形，例如90°-360°的扇形時，如果仍使用上面的代碼進(jìn)行逆時鐘填充，將會得到圖2所示的顯示結(jié)果，這顯然多出了右下部的一個三角區(qū)域。為了去掉這個多出的部分，我們可以改進(jìn)一下上面的方法，當(dāng)填充的扇形大于180°時，先順時鐘方向填充一次，再用背景色（這里是白色）逆時鐘方向多次填充，以達(dá)到去掉多余部分的目的，從而實(shí)現(xiàn)了大于180°的扇形填充。顯示效果如圖4所示。下面是繪制扇形通用完整的代碼。

圖4 90度到360度的扇形填充Fig.4 Fan filling of 90 degrees to 360 degrees

3 結(jié)語

目前，HTML5在Web前端開發(fā)中廣為流行，在繪圖、動畫及多媒體等方面都有很多應(yīng)用。例如利用和標(biāo)簽進(jìn)行進(jìn)度條或直方圖的繪制；利用

代碼一：進(jìn)度條和直方圖

代碼二：音頻和視頻

在實(shí)際的繪圖中，我們可以利用已有的方法加以變化，從而實(shí)現(xiàn)語言沒有直接提供的功能。只要思路奇巧，代碼就可以相當(dāng)簡潔高效。