基于HTML5的圖形化網(wǎng)頁數(shù)據(jù)展示

楊帆

摘 要：在HTML4的時(shí)代，如果要將各種數(shù)據(jù)圖表在互聯(lián)網(wǎng)上展示出來，辦法并不多。HTML、CSS+Javascript的展示能力，不管是從性能還是功能方面來說，都十分有限。這個(gè)時(shí)候Flash出現(xiàn)了，頓時(shí)千樹萬樹梨花開，互聯(lián)網(wǎng)時(shí)代迎來了多媒體時(shí)代，數(shù)據(jù)展示組件基于Flash也是大放異彩。但是Flash由于效率問題，功耗較高，還有文件尺寸偏大，語言獨(dú)立不易學(xué)的問題。今天，HTML5來了，讓我來用HTML5的新增功能Canvas技術(shù)實(shí)現(xiàn)一個(gè)漂亮的餅圖控件，來為大家介紹HTML5在圖形化網(wǎng)頁數(shù)據(jù)展示方面的優(yōu)勢。

關(guān)鍵詞：HTML5；數(shù)據(jù)展示；組件；Canvas；Javascript

1 Canvas介紹

HTML5中，對圖形化網(wǎng)頁數(shù)據(jù)展示影響最大的就要數(shù)Canvas了。本文接下來會(huì)對Canvas 2D模式進(jìn)行介紹，并使用Canvas 2D實(shí)現(xiàn)一個(gè)餅狀圖的數(shù)據(jù)展示組件。在實(shí)現(xiàn)中，為節(jié)省篇幅，本文假設(shè)讀者對Javascript和HTML都有一定的了解，將僅對Canvas相關(guān)部份進(jìn)行重點(diǎn)講解。

在介紹Canvas 2D之前，讓我們先找一個(gè)餅狀圖的組件，并以它作為我們實(shí)現(xiàn)的目標(biāo)：

百度搜到這個(gè)餅狀圖，看起來效果不錯(cuò)，我們來嘗試實(shí)現(xiàn)它。

2 實(shí)現(xiàn)思路與具體實(shí)現(xiàn)

觀察這個(gè)餅狀圖，最直觀可以看到的就是它的黑色背景。我們要畫餅狀圖，要先把它的背景畫出來，那么如何在Canvas中畫一個(gè)大大的黑色方框呢？首先我們必須在頁面中有Canvas元素。即，之后，我們用js調(diào)用這個(gè)元素的getContext（“2d”）來獲得2d的繪圖上下文（注意2d的d必須是小寫），之后我們就可以使用這個(gè)上下文來進(jìn)行繪圖了。在Canvas中，繪制矩形的方法是使用fillRect（x，y，w，h）方法，矩形的填充顏色使用fillStyle屬性來設(shè)置。其中x，y是要繪制矩形的坐標(biāo)，而w，h是要繪制矩形的寬度與高度。在Canvas的坐標(biāo)系中，以Canvas元素的左上角為0，0，X軸向右延伸，Y軸向下延伸。所以要畫一個(gè)400x400的矩形，代碼如上。

效果：

成功！終于把背景完成了。下面我們來畫餅，整個(gè)的餅圖其實(shí)是由多個(gè)扇形組成的。在canvas的2d上下文中，畫扇形的方式是使用“路徑”功能，一個(gè)路徑其實(shí)就是一個(gè)形狀，想像一下有一個(gè)筆尖在畫布上落下，這兒便是形狀的起點(diǎn)，隨著你的移動(dòng)筆尖，線條就會(huì)出現(xiàn)在畫布上，當(dāng)你決定想完成這個(gè)形狀的時(shí)候，從筆尖的當(dāng)前位置，到形狀的起點(diǎn)畫一條直線，關(guān)閉形狀區(qū)域，這個(gè)形狀就畫好了。在Canvas的繪圖API中，并沒有畫圓的方法，只能畫一定弧度的弧線，但我們可以畫2π弧度的弧來畫圓。Canvas畫弧線的API如下：

arc（x，y，r，a1，a2，b）

其中：x，y為圓弧的圓心，r為圓弧半徑，a1為起始弧度，a2為終止弧圖，b為布爾值，代表畫弧方向，b為true時(shí)代表逆時(shí)針畫弧，b為false時(shí)代表順時(shí)針畫弧。Canvas畫弧時(shí)以X軸正向（右方）為0度。

在Canvas API中，開始一個(gè)新的形狀路徑的API是openPath（），閉合一個(gè)形狀的API是closePath（）；移動(dòng)畫筆，不進(jìn)行繪畫的API是moveTo（x，y），x，y為要移動(dòng)畫筆的目的坐標(biāo)。從畫筆當(dāng)前坐標(biāo)畫一條線到x，y的API為lineTo（x，y）。Canvas中填充畫好的形狀的API是fill（），使用的顏色仍然是fillStyle屬性。了解了這些，跟據(jù)圖3中我們的設(shè)計(jì)。很容易可以畫出我們的第一個(gè)弧。按我們這個(gè)思路，如果我們要畫一個(gè)圓心坐標(biāo)在200，200，半徑為100，角度為30度（π/6）的黃色扇形，代碼如下：

再看下效果：

現(xiàn)在，我們即會(huì)畫矩形，也會(huì)畫扇形了，我們當(dāng)然也可以用這些扇形拼成一個(gè)圓。那么為了實(shí)現(xiàn)餅狀圖控件，我們現(xiàn)在唯一缺少的Canvas技術(shù)就是文字的顯示了。

Canvas 2d上下文API中，和文字相關(guān)的內(nèi)如有以下幾個(gè)：

fillStyle屬性：代表要繪制的文字顏色

font屬性：要繪制的字體與字號。例值：”9px Arial”。字體為Arial，字號為9px

textBaseline屬性：要繪制的字體與指定坐標(biāo)的位置關(guān)系，值與效果如下圖：

shadowColor屬性：填充陰影顏色。

shadowOffsetX屬性：填充陰影X偏移。

shadowOffsetY屬性：填充陰影Y偏移。

fillText方法：fillText（text，x，y）。text為要繪制的文字內(nèi)容，x，y為要繪制的坐標(biāo)。

新增代碼如下：

效果：

致此，完成一個(gè)餅圖所需要的Canvas知識我們已經(jīng)完全掌握了?？丶庋b的設(shè)計(jì)部份略過，直接帖一下這個(gè)餅圖完成的最終效果：

在完成稿里面，我們?yōu)榱嗣烙^，對邊緣做了虛化處理。這是怎么做的呢？其實(shí)，fillStyle并不是僅僅可以填寫具體的顏色，fillStyle還可以賦值為一個(gè)暫變。我們通過設(shè)置漸變，讓顏色填充在邊緣時(shí)迅速由本色向背景色（黑色）漸變，即實(shí)現(xiàn)了這種效果。相關(guān)代碼如下：

最后把所有相關(guān)代碼附上：

⑴HTML文件：

⑵JS文件（yfchart.js）

按我們的靈活設(shè)計(jì)，其實(shí)要換膚的話也十分容易。yfchart.js完全不需要修改，只需要修改html中對餅圖控件引用的部份代碼即可。修改后代碼如下（即去掉黑底皮膚定義部份）：

效果如下：

3 總結(jié)與展望

從以上介紹和實(shí)例可以看出，使用HTML5做數(shù)據(jù)展示非常簡單。只要短短的百行代碼即可實(shí)現(xiàn)一個(gè)支持皮膚換膚和任意數(shù)據(jù)內(nèi)容的餅圖控件。并且效果也是比較好的。實(shí)際上，HTML5可以做的遠(yuǎn)遠(yuǎn)不止于此。在數(shù)據(jù)展示方面，HTML5對現(xiàn)代設(shè)備支持的非常好，比如觸摸屏，蛇螺儀等等，使用這些功能，我們可以做出用手指和圖表交互的功能，也可以做出一個(gè)3維的數(shù)據(jù)世界，你拿著支持HTML5的移動(dòng)設(shè)備，就像拿著一扇窗戶一樣，隨著設(shè)備的移動(dòng)，通過屏幕看到的數(shù)據(jù)也是不同的。這些都是HTML5可以做到的神奇功能。除此之外，HTML5的本地存儲，Web worker等功能甚至允許我們在前端做一些數(shù)據(jù)的統(tǒng)計(jì)和計(jì)算工作，而不是簡單的什么都交給后臺。

按HTML5的現(xiàn)狀來看，使用HTML5做數(shù)據(jù)展示已經(jīng)完全可以做的比Flash更好，且功能會(huì)比Flash更加強(qiáng)大。希望可以通過這篇文章讓更多的人關(guān)注HTML5，使用HTML5，讓我們的開發(fā)變的更簡單，效果更好。

[參考文獻(xiàn)]

[1]David Flanagan，著，淘寶前端團(tuán)隊(duì)，譯.Javascript權(quán)威指南David Flanagan，Javascript：The Definitive Guide.

[2]Nicholas C.Zakas著，曹力，張欣，等，譯.Javascript高級程序設(shè)計(jì). Nicholas C.Zakas，Professional Javascript for Web Developers.

[3]秀野堂主，蔣宇捷，羅睿，編著.論道HTML5.Xiu Yetangzhu，Jiang Yujie，Luo Rui，The way to HTML5.

[4]w3c.http：//www.w3.org/TR/REC-html32.

[5]w3c.http：//www.w3.org/TR/REC-html40/.