于萬國，馬 軍

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

HTML5 Canvas API中arc方法的應(yīng)用研究

于萬國，馬 軍

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

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

HTML5;canvas API;arc方法;應(yīng)用

0 引 言

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

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

1 arc的基本語法及功能

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

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

1.1 準(zhǔn)備工作

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

①取得canvas元素

首先，用document.getElementById等方法取得Canvas對(duì)象。因?yàn)樾枰{(diào)用這個(gè)對(duì)象提供的方法來進(jìn)行圖形繪制。

②取得上下文(context)

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

③設(shè)定繪圖樣式(style)

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

④指定線寬

使用圖形上下文對(duì)象的lineWidth屬性設(shè)置圖形邊框的寬度。如果不設(shè)置，默認(rèn)1px寬度。

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

1.2 arc方法的功能剖析

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

1.2.1 arc方法的基本語法

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

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

Var radians=degree*Math.PI/180;

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

1.2.2 arc方法的功能

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

代碼1：初始代碼

Update your browser;

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

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

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

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

圖2 開始弧度和結(jié)束弧度的參考值

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

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

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

如要繪制扇形填充則需要調(diào)用開始路徑方法beginPath和結(jié)束路徑方法closePath，還需要用moveTo方法將繪制點(diǎn)移到圓心的位置(200，200)。例如下面的代碼2繪制了從A點(diǎn)到B點(diǎn)的扇形填充區(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點(diǎn)到B點(diǎn)的扇形填充結(jié)果

圖4 從A點(diǎn)到B點(diǎn)的扇形邊框結(jié)果

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

3)功能3：繪制直線

如果開始弧度、結(jié)束弧度相等，再利用moveTo、beginPath、closePath方法就可以繪制一條從圓心到該角度的一條直線。如代碼3繪制一條從圓心到B點(diǎn)的一條直線，這條直線的線寬為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)時(shí)間變化的時(shí)鐘

context.closePath();

context.stroke();

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

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

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

1.3.1 時(shí)鐘表盤的繪制

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

圖6 小刻度表盤

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

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

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

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

1.3.2 繪制時(shí)鐘的時(shí)、分、秒針

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

var h=date.getHours();

var m=date.getMinutes();

var sec=date.getSeconds();

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

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

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

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

1.3.3 繪制時(shí)鐘的圓心小紅點(diǎn)

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

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

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

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

代碼4：

window.onload=function(){

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

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

function drawClock(){

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

//繪制時(shí)鐘表盤小刻度

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();

}

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

oGc.fillStyle="white";

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

oGc.fill();

//繪制時(shí)鐘表盤大刻度

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();

}

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

oGc.fillStyle="white";

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

oGc.fill();

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

var date=new Date();

var h=date.getHours();

var m=date.getMinutes();

var sec=date.getSeconds();

//繪制時(shí)針

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();

//繪制時(shí)鐘表盤中心小圓

oGc.beginPath();

oGc.fillStyle="red";

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

oGc.fill();

oGc.closePath();

}

drawClock();

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

}

2 結(jié)論與討論

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

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

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

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

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

[5]龍?jiān)?基于HTML5的WebGIS研究[D].贛州：江西理工大學(xué),2013.

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

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

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

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

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

[責(zé)任編輯：王榮榮 英文編輯：劉彥哲]

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

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

于萬國(1976-)，男，蒙古族，河北承德人，河北民族師范學(xué)院數(shù)學(xué)與計(jì)算機(jī)系講師，理學(xué)碩士，研究方向?yàn)槎嗝襟w技術(shù)和網(wǎng)絡(luò)應(yīng)用。

TP 311.52

A

10.3969/j.issn.1673-1492.2016.11.004

來稿日期：2016-03-25