HTML5 Canvas API中arc方法的應用研究

于萬國，馬 軍

(河北民族師范學院，河北 承德 067000)

HTML5 Canvas API中arc方法的應用研究

于萬國，馬 軍

(河北民族師范學院，河北 承德 067000)

目的 針對HTML5 Canvas API的方法、屬性之多，方法的使用參數(shù)之多，各方法之間的聯(lián)合使用之多，造成了初學者對HTML5 Canvas API方法、屬性掌握的困難。通過對HTML5 Canvas API中方法、屬性的文獻閱讀、案例研究的形式，探討HTML5 Canvas API的使用。方法 選用HTML5 Canvas API中arc方法，運用分析法、典型案例法來具體闡述arc方法的應用，最后用arc方法和各種功能實現(xiàn)了一個比較復雜的隨系統(tǒng)時間變化的動態(tài)時鐘，進而使讀者了解HTML5 Canvas API其它方法的運用。結果 HTML5 Canvas API中arc方法需要在一定的環(huán)境下使用，通過各方法、屬性的聯(lián)合應用以及arc方法參數(shù)的調整，可以用arc方法繪制圓形邊框或圓弧邊框，繪制圓形填充或扇形填充，繪制直線。通過圓形邊框、直線的繪制，就可以繪制一個比較復雜的時鐘。結論 HTML5 Canvas API中，面對大量的屬性和方法，arc方法的剖析對全面掌握HTML5 Canvas API的其它方法有更加深刻的認識，另外通過案例來研究掌握各種方法的使用，對于學習者是非常有效的，進而通過HTML5 Canvas API的方法、屬性來制作出豐富多彩的Web頁面。

HTML5;canvas API;arc方法;應用

0 引 言

Canvas元素是HTML5中新增的一個重要元素，專門用來繪制圖形，伴隨這個元素而來的還有一套編程接口——Canvas API。利用Canvas API可以動態(tài)生成和展示圖形、圖表、圖像以及動畫，解決了以往若要在瀏覽器中使用繪圖API，只能使用Adobe的Flash和SVG(scalable vector graphics，可伸縮矢量圖形)插件或者使用只有IE才支持的VML(vector markup language，矢量標記語言)的歷史，Canvas的出現(xiàn)，對瀏覽器端繪圖功能的實現(xiàn)非常有用，因此Canvas被納入HTML5規(guī)范。

Canvas API提供了很多繪制圖形或路徑的方法，如lineTo()、fillRect()、strokeRect()、rect()、quadraticCurveTo()、bezierCurveTo()、arc()、arcTo()，drawImage()等，利用好這些方法，可以在頁面上繪制出任何想要的、非常漂亮的圖形或圖像，創(chuàng)造出更加豐富多彩、賞心悅目的Web頁面。這些方法中有些方法使用起來非常復雜，初學者往往不易把握。在一些教材和文獻中，只是簡單地介紹了各個方法的使用，對于它們之間的綜合應用及參數(shù)調整之后的變化論述的很少[1-2]。本文以arc方法為例深入剖析它的多種用法，對Canvas API其它方法的學習有很大的借鑒意義。

1 arc的基本語法及功能

在使用arc方法之前，有必要認識一下Canvas的坐標表示。在Canvas元素里進行繪畫，并不是直接用鼠標在瀏覽器中繪畫。事實上，在HTML頁面中放置Canvas元素只是提供了一塊無色透明的區(qū)域，相當于在頁面上放置了一塊“畫布”[3-4]，畫布的坐標如圖1所示。

圖1 Canvas中的x，y坐標(單位:像素)

1.1 準備工作

在使用arc方法之前，需要經(jīng)過下列幾個步驟：

①取得canvas元素

首先，用document.getElementById等方法取得Canvas對象。因為需要調用這個對象提供的方法來進行圖形繪制。

②取得上下文(context)

進行圖形繪制時，需要用到圖形上下文(graphics context)。圖形上下文中是一個封閉了很多繪圖功能的對象，需要使用Canvas對象的getContext方法來獲得圖形上下文。在draw函數(shù)中，將參數(shù)設為“2d”[5]。

③設定繪圖樣式(style)

所謂繪圖的樣式，主要是針對圖形的顏色而言，但是并不限于圖形的顏色，還可以是線性漸變、徑向漸變、各種透明度的顏色等。包括設定填充圖形的樣式(fillStyle)和設定圖形邊框的樣式(strokeStyle)，在該屬性中填入顏色值即可。顏色值使用的是普通樣式表中使用的顏色值，例如“red”、“blue”顏色名，或“FF0000”這種十六進制的顏色值。另外，也可以通過rgb(紅色值、綠色值、藍色值)或rgba(紅色值、綠色值、藍色值、透明度)這種rgb函數(shù)或rgba函數(shù)來指定顏色的值[6]。如果不設置默認使用黑色填充和繪制邊框。

④指定線寬

使用圖形上下文對象的lineWidth屬性設置圖形邊框的寬度。如果不設置，默認1px寬度。

這些都設置好之后，就可以用arc方法。

1.2 arc方法的功能剖析

arc方法的基本功能是繪制圓形路徑。繪制路徑時如果首尾相接，需要首先調用開始創(chuàng)建路徑方法beginPath，接著繪制路徑，路徑創(chuàng)建完成后，調用關閉路徑的方法closePath，即要把繪制路徑的方法寫在beginPath和closePath方法之間。如果首尾不相接，只是繪制一段圓弧，就不需要調用beginPath和closePath。繪制完路徑后，就可以調用填充與繪制邊框的方法了，填充的方法為fill，繪制邊框的方法為stroke。填充是指填滿圖形內部，繪制邊框是指不填滿圖形內部，只繪制圖形的外框[7，8]。Canvas元素結合使用這兩種方式來繪制圖形。

1.2.1 arc方法的基本語法

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

其中context為上下文對象，arc方法有6個參數(shù)，x為繪制圓形的中心點橫坐標，y為繪制圓形的中心點縱坐標，radius為圓形半徑，startAngle為開始弧度，endAngle為結束弧度，anticlockwise為是否按順時針方向進行繪制，注意：參數(shù)為true時，按逆時針繪制；參數(shù)為false時，按順時針繪制[9]。另外，startAngle、endAngle為弧度值，如果使用角度，需要使用如下所示的方法將角度轉換為弧度[10]。

Var radians=degree*Math.PI/180;

其中Math.PI表示角度為180 °，Math.PI*2表示角度為360 °。

1.2.2 arc方法的功能

下面將依次給出arc方法的功能，在列出各種功能之前，先在HTML代碼中body元素內布置好之前講過的內容，寫出如下代碼1。

代碼1：初始代碼

Update your browser;

1)功能1:繪制圓形邊框或圓弧邊框

arc方法繪制圓時，開始弧度為0，結束弧度Math.PI*2。如下面的代碼即可以畫一個圓形。

context.arc(200,200,100,0,2*Math.PI,false);

繪制圓弧時，必須指定開始弧度、結束弧度的值，開始弧度和結束弧度的參考值可按圖2來指定，然后再指定是順時針還是逆時針。

圖2 開始弧度和結束弧度的參考值

例如代碼為context.arc(200,200,100,0,90*Math.PI/180,false)，則繪制了從A點到B點的一段圓??；如開始弧度、結束弧度換分別換為90*Math.PI/180和270*Math.PI/180，則繪制了從B點到C點的一段圓弧；如換為0*Math.PI/180和-90*Math.PI/180則繪制了從A點經(jīng)過B、C兩點到D點的一段圓??；如換為0*Math.PI/180和-90*Math.PI/180，第六個參數(shù)變?yōu)轫槙r針繪畫，則繪制了從A點直接到D點的一段圓弧。

2)功能2:繪制圓形填充或扇形填充

如要繪制圓形填充，則只需要將初始代碼中的context.stroke()換為context.fill()即可。

如要繪制扇形填充則需要調用開始路徑方法beginPath和結束路徑方法closePath，還需要用moveTo方法將繪制點移到圓心的位置(200，200)。例如下面的代碼2繪制了從A點到B點的扇形填充區(qū)域，效果如圖3所示。

代碼2：

context.beginPath();

context.moveTo(200,200);

context.arc(200,200,100,0,90*Math.PI/180,false)

context.closePath();

context.fill();

圖3 從A點到B點的扇形填充結果

圖4 從A點到B點的扇形邊框結果

如需要繪制沒有填充的扇形邊框，只需要將代碼2中的“context.fill();”換成“context.stroke();”，如圖4所示。

3)功能3：繪制直線

如果開始弧度、結束弧度相等，再利用moveTo、beginPath、closePath方法就可以繪制一條從圓心到該角度的一條直線。如代碼3繪制一條從圓心到B點的一條直線，這條直線的線寬為2px。

代碼3：

context.beginPath();

context.moveTo(200,200);

context.arc(200,200,100,90*Math.PI/180,90*Math.PI/180,false)

圖5 隨系統(tǒng)時間變化的時鐘

context.closePath();

context.stroke();

1.3 綜合利用arc方法的各種功能實現(xiàn)比較復雜的繪圖效果

在這里以繪制隨系統(tǒng)時間而變化的時鐘為例來介紹arc方法的各種功能，最后繪制的時鐘效果如圖5所示。

下面分步驟來實現(xiàn)該時鐘效果。

1.3.1 時鐘表盤的繪制

首先定義一個繪制時鐘函數(shù)drawClock，在該函數(shù)中，定義x、y、r3個變量，分別表示時鐘的圓形坐標(x,y)和半徑r，接著利用arc繪制扇形邊框的方法繪制時鐘的60個小刻度。繪制后如圖6所示。

圖6 小刻度表盤

圖7 覆蓋表盤中心區(qū)域后的小刻度表盤

圖8 覆蓋表盤中心區(qū)域后的刻度表盤

接下來，用繪制和底色完全相同的填充圓形覆蓋中間區(qū)域，使表盤的小刻度只剩下半徑的19/20，如圖7所示。

最后用arc繪制直線的方法繪制表盤的12個大刻度，用覆蓋小刻度的方法使表盤的大刻度只剩下半徑的18/20，如圖8所示。

1.3.2 繪制時鐘的時、分、秒針

① 首先用var date=new Date()得到系統(tǒng)當前的日期時間，再用

var h=date.getHours();

var m=date.getMinutes();

var sec=date.getSeconds();

分別獲得系統(tǒng)的小時(h)、分鐘(min)和秒(sec)。

② 用arc畫直線的方法畫時針，一個小時走過的角度是30°，故h小時min分鐘走過的角度為(h+m/60)*30，又由于arc方法的起始基準坐標為水平向右,方向為0°，而時鐘基準起始坐標為垂直向上,方向為0°，有一個90°的差值，因此在用arc畫線方法時，起始弧度和終止弧度均為(-90+(h+m/60)*30)*Math.PI/180，時針的長度為半徑r的14/20，粗細設為4。

③ 同理，用同樣的方法畫分針，只不過1 min走過的角度是6°，因此用arc畫線方法畫分鐘時，起始弧度和終止弧度均為(-90+m*6)*Math.PI/180，分針的長度為半徑r的16/20，粗細設為3。

④ 畫秒針的方法和畫分針一樣，起始弧度和終止弧度均為(-90+sec*6)*Math.PI/180，粗細設為1。

1.3.3 繪制時鐘的圓心小紅點

這個比較簡單，只需要使用arc填充圓的方法就可以實現(xiàn)。

至此，整個drawClock函數(shù)完成。

1.3.4 運行一次drawClock函數(shù)

開啟定時器，使時針、分針、秒針隨系統(tǒng)時間而變化,最終代碼如代碼4。

代碼4：

window.onload=function(){

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

var oGc=oC.getContext("2d");

function drawClock(){

var x=200,y=200,r=150;

//繪制時鐘表盤小刻度

oGc.moveTo(x,y);

for(var i=0;i<60;i++)

{

oGc.beginPath();

oGc.moveTo(200,200);

oGc.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);

oGc.closePath();

oGc.stroke();

}

//覆蓋時鐘表盤小刻度中心區(qū)域

oGc.fillStyle="white";

oGc.arc(x,y,r*19/20,0,2*Math.PI,false);

oGc.fill();

//繪制時鐘表盤大刻度

for(var i=0;i<12;i++)

{

oGc.beginPath();

oGc.lineWidth=3;

oGc.moveTo(x,y);

oGc.arc(x,y,r,i*30*Math.PI/180,i*30*Math.PI/180,false);

oGc.closePath();

oGc.stroke();

}

//覆蓋時鐘表盤大刻度中心區(qū)域

oGc.fillStyle="white";

oGc.arc(x,y,r*18/20,0,2*Math.PI,false);

oGc.fill();

//獲取系統(tǒng)時間

var date=new Date();

var h=date.getHours();

var m=date.getMinutes();

var sec=date.getSeconds();

//繪制時針

oGc.lineWidth=4;

oGc.beginPath();

oGc.moveTo(x,y);

oGc.arc(x,y,r*14/20,(-90+(h+m/60)*30)*Math.PI/180,(-90+(h+m/60)*30)*Math.PI/180,false);

oGc.closePath();

oGc.stroke();

//繪制分針

oGc.lineWidth=3;

oGc.beginPath();

oGc.moveTo(x,y);

oGc.arc(x,y,r*16/20,(-90+m*6)*Math.PI/180,(-90+m*6)*Math.PI/180,false);

oGc.closePath();

oGc.stroke();

//繪制秒針

oGc.lineWidth=1;

oGc.beginPath();

oGc.moveTo(x,y);

oGc.arc(x,y,r*16/20,(-90+sec*6)*Math.PI/180,(-90+sec*6)*Math.PI/180,false);

oGc.closePath();

oGc.stroke();

//繪制時鐘表盤中心小圓

oGc.beginPath();

oGc.fillStyle="red";

oGc.arc(x,y,3,0,2*Math.PI,false);

oGc.fill();

oGc.closePath();

}

drawClock();

setInterval(drawClock,30);//開啟定時器

}

2 結論與討論

本文簡要介紹了HTML5 Canvas標簽及API的使用，詳細剖析HTML5 Canvas API中arc方法的語法及各種功能，最后用arc方法和各種功能實現(xiàn)一個比較復雜的隨系統(tǒng)時間變化的動態(tài)時鐘。該方法的剖析對學習掌握HTML5 Canvas API的其它方法有更加深刻的認識?？傊?，在HTML5 Canvas API中，面對大量的屬性和方法，初學者往往不容易把握，通過案例來掌握各種方法的使用，對于學習者是非常有效的。熟練掌握之后，就可以制作出豐富多彩的Web頁面。

[1]Peter Lubbers,Brian Albers著,柳靖,李杰譯.HTML5程序設計[M].2版.北京：人民郵電出版社,2012：23-37.

[2]陸凌牛.HTML5與CSS 3權威指南(上冊)[M].2版.機械工業(yè)出版社,2013.138-147.

[3]谷偉.基于HTML5 Canvas的客戶端圖表技術研究[J].信息技術，2013,(09):107-110.

[4]成舟,邵志清,張歡歡,等.HTML5 Canvas技術在工程流程圖中的研究與應用[J].華東理工大學學報：自然科學版，2015，(02)：34-35.

[5]龍云.基于HTML5的WebGIS研究[D].贛州：江西理工大學,2013.

[6]趙劍.HTML5動畫引擎技術的研究與實現(xiàn)[D].北京：北京郵電大學,2015.

[7]吳磊,張福慶.基于HTML Canvas的WebGIS客戶端技術研究[J].地理信息世界,2009,(03):78-82.

[8]谷偉.基于HTML5 Canvas的客戶端圖表技術研究[J].信息技術,2013,(09):107-110.

[9]張衛(wèi)國.基于HTML5的2D動畫的設計與實現(xiàn)[D].廣州：中山大學,2014.

[10]王曉.基于HTML5的矢量地圖發(fā)布關鍵技術研究[D].南京：南京師范大學,2011.

[責任編輯：王榮榮 英文編輯：劉彥哲]

Application of arc Method in HTML 5 Canvas API

YU Wan-guo,MA Jun

(Hebei Normal University for Nationalities,Chengde,Hebei 067000,China)

Objective The fact that there are plenty of HTML 5 Canvas API methods,properties,parameters of methods and combinations between methods leads to the beginners’difficulties in mastering HTML 5 Canvas API methods and their properties.By reading literature of HTML 5 Canvas API methods and properties and the the form of case study,this paper discussed the application of Canvas API.Methods Arc method of the HTML 5 Canvas API was selected and explained its specific application by analysis and the typical case.A more complex clock with the dynamic system time was implemented,which made readers understand the other methods of HTML 5 Canvas API.Results Arc method of HTML 5 Canvas API could be used in certain environment.With the combined application of various methods and properties and the adjustment of the parameters,the arc method was used to draw round borders or arc frame,create a circular or fan filling and draw a straight line.The drawing of the circular border and straight line led to complete a more complicated clock.Conclusion For a large number of properties and methods in HTML 5 Canvas API,the analysis of the arc method can help the comprehensive grasp and profound understanding of other methods in HTML 5 Canvas API.And it is very effective for learners to master various methods by case study and to create colorful WEB page with methods and properties of HTML 5 Canvas API.

HTML5;canvas API;arc method;application

承德市教育科學研究“十二五”規(guī)劃2015年度專項課題(1501004)

于萬國(1976-)，男，蒙古族，河北承德人，河北民族師范學院數(shù)學與計算機系講師，理學碩士，研究方向為多媒體技術和網(wǎng)絡應用。

TP 311.52

A

10.3969/j.issn.1673-1492.2016.11.004

來稿日期：2016-03-25