Canvas是HTML5中新增的元素，專門用來繪製圖形，相當於在頁面中放了一張“畫布”，可以在裡面繪製圖形，但是不是指用滑鼠畫圖，而是需要用Javascript編寫需要繪製的圖形的指令碼。

我們利用canvas可以繪製出下圖：

【Web前端基礎知識】如何使用Canvas繪製圓形

在繪製上圖之前，我們先來看下相關知識點：

一、開始建立路徑

使用beginPath方法開始建立路徑。beginPath() 方法表示開始一條路徑，或重置當前的路徑。簡單來說，其實就是告訴畫布，我要開始畫草稿了，請把之前的草稿都清除掉。

這個方法不設定引數，透過呼叫這個方法開始建立路徑，在案例中我們需要迴圈繪製圓形，在迴圈的幾次建立路徑的過程中，每次開始建立是都要呼叫beginPath()。

語法是：

context. beginPath ();

二、建立圓形路徑

建立圓形路徑的時候，需要使用圖形上下文物件的arc()方法，這個方法的定義是：

arc() 方法建立弧/曲線(用於建立圓或部分圓)。

這個方法的語法是：

這個方法使用6個引數，

x為圓的中心的 x 座標;

y為圓的中心的 y 座標;

r為圓的半徑;sAngle為起始角，以弧度計(弧的圓形的三點鐘位置是 0 度);

eAngle為結束角，以弧度計;

counterclockwise為規定應該逆時針還是順時針繪圖(False = 順時針，true = 逆時針)。

【Web前端基礎知識】如何使用Canvas繪製圓形

arc()方法不僅可以繪製圓形，還可以繪製圓弧形，因此，必須指定起始角和結束角

三、關閉路徑

路徑建立完畢後，使用圖形上下文物件的closePath()方法關閉路徑。

closePath() 方法建立從當前點到開始點的路徑。

語法：

context.closePath();

關閉路徑後，路徑的建立工作就完成了。但是需要注意的是，這個時候只是路徑建立完畢而已，還沒有真正繪製任何圖形。我們接著來學習如何設定繪製樣式和填充當前路徑。

四、設定繪製樣式

設定繪製樣式，需要使用fillStyle。fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或模式。

語法：context.fillStyle=color|gradient|pattern;

color：指示繪圖填充色的 CSS 顏色值。預設值是 #000000;

gradient：用於填充繪圖的漸變物件(線性或放射性);

pattern：用於填充繪圖的 pattern 物件。

這裡我們需要使用fillStyle來設定顏色。

五、填充圖形

我們需要使用fill()方法來填充已經設定好的圓形。

fill() 方法填充當前的影像(路徑)。預設顏色是黑色。

語法：

context.fill();

六、利用上面學會的內容我們先來繪製一個圓形

我們在寬500畫素，高500畫素，邊框是1畫素黑色實線的畫布中，繪製一個圓心在x軸25畫素，y軸25畫素，半徑是10畫素，起始角是0，結束角是2*PI，逆時針，填充顏色是半透明的綠色的圓形。

具體程式碼如下：

<!DOCTYPE html >

< html >

< head >

     < meta charset = "UTF-8" >

     < title > 使用canvas繪製圓形 </ title >

     < style >

        #canvas{

            border:1px solid #000;

        }

     </ style >

</ head >

< body >

     < canvas width = "500" height = "500" id = "canvas" > </ canvas >

     < script >

        var myCanva   = document .getElementById("canvas");

        var ctx = myCanva .getContext("2d");



        ctx.beginPath();

        ctx.arc(25, 25, 10, 0, Math.PI * 2, true);

        ctx.closePath();

         ctx.fillStyle = 'rgba(0,255,0,0.25)' ;

        ctx.fill();

     </ script >

</ body >

</ html >

七、繪製文中一開始提到的圖，只需要加一個迴圈就可以實現了。

具體程式碼如下：

<!DOCTYPE html >

< html >

< head >

     < meta charset = "UTF-8" >

     < title > 使用canvas繪製圓形 </ title >

     < style >

        #canvas{

            border:1px solid #000;

        }

     </ style >

</ head >

< body >

     < canvas width = "500" height = "500" id = "canvas" > </ canvas >

     < script >

        var myCanva   = document .getElementById("canvas");

        var ctx = myCanva .getContext("2d");



        for(var i = 0 ; i < 10 ; i++){

            ctx.beginPath();

            ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

            ctx.closePath();

             ctx.fillStyle = 'rgba(0,255,0,0.25)' ;

            ctx.fill();

        }

     </ script >

</ body >

</ html >

這段程式碼執行的結果如下圖：

【Web前端基礎知識】如何使用Canvas繪製圓形

【Web前端基礎知識】如何使用Canvas繪製圓形

相關文章