李伙欽

（福建船政交通職業(yè)學(xué)院信息工程系 福建 福州 350007）

0 引言

隨著信息技術(shù)的迅猛發(fā)展，上網(wǎng)已成為很多人生活中必不可少的一部分，人們通過(guò)網(wǎng)站獲取資訊，下載影音，社交通信等，其得益于HTML的標(biāo)準(zhǔn)化，網(wǎng)頁(yè)可以無(wú)障礙的在各種平臺(tái)各種操作系統(tǒng)上運(yùn)行。上一版本的HTML標(biāo)準(zhǔn)是2001的XHTML1.1標(biāo)準(zhǔn)，十幾年來(lái)一直沒(méi)有更新，漸漸跟不上用戶(hù)的需求了。最新的HTML5標(biāo)準(zhǔn)應(yīng)運(yùn)而生，為我們帶來(lái)了強(qiáng)大的用于交互、多媒體和本地化等方面的標(biāo)簽以及應(yīng)用編程接口。

HTML5一個(gè)非常實(shí)用的特性是用于繪畫(huà)的Canvas元素，Canvas擁有多種繪制路徑、矩形、圓形、字符以及圖像處理的方法，為網(wǎng)頁(yè)繪圖及圖像處理帶來(lái)了便捷。

本文介紹了HTML5的特性及Canvas元素的相關(guān)概念，然后介紹采用Canvas制作網(wǎng)頁(yè)電子畫(huà)板的設(shè)計(jì)思路，分析其設(shè)計(jì)步驟及注意事項(xiàng)。

本文的組織結(jié)構(gòu)，第一章介紹HTML5概念，第二章介紹設(shè)計(jì)總體思路，第三章介紹詳細(xì)設(shè)計(jì)，最后總結(jié)。

1 第一章 相關(guān)技術(shù)

1.1 HTML5

HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的 HTML 4.01后，后繼的HTML 5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來(lái)，成立了一個(gè)叫做WHATWG(Web超文本應(yīng)用技術(shù)工作組）的組織，HTML5草案的前身名為 Web Applications 1.0，于2004年被 WHATWG提出，于2007年被 W3C接納，并成立了新的 HTML工作團(tuán)隊(duì)。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有兩大特點(diǎn)：首先，強(qiáng)化了 Web網(wǎng)頁(yè)的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。

HTML5中的一些有趣的新特性：

1.1.1 用于繪畫(huà)的 canvas元素

1.1.2 用于媒介回放的 video和 audio元素

1.1.3 對(duì)本地離線存儲(chǔ)的更好的支持

1.1.4 新的特殊內(nèi)容元素，比如 article、footer、header、nav、section

1.1.5 新的表單控件，比如calendar、date、time、email、url、search

1.2 Canvas

HTML5定義了元素作為位圖畫(huà)布在瀏覽器中的相關(guān)解決方案，它用于渲染圖形，游戲圖像或者其他飛行中的視覺(jué)圖形。一個(gè)Canvas代表了頁(yè)面中的一個(gè)矩形區(qū)域，在這個(gè)區(qū)域里面，你可以用Javascript來(lái)畫(huà)你想畫(huà)的任何東西。HTML5定義了一系列的方法用來(lái)畫(huà)圖形，定位路徑，創(chuàng)建漸變以及將圖形變形。

HTML5 Canvas的功能讓人自然聯(lián)想到Flash，同樣用來(lái)繪制圖像和動(dòng)畫(huà)，F(xiàn)lash目前的產(chǎn)品成熟度和用戶(hù)接受度都是很高的，F(xiàn)lash無(wú)論是在矢量圖還是位圖的繪制上效率都略高于HTML5 Canvas。HTML5 Canvas的優(yōu)勢(shì)主要在無(wú)須另外安裝插件即可播放，與網(wǎng)頁(yè)其他元素的容易融合協(xié)作。

2 第二章 設(shè)計(jì)總體思路

網(wǎng)頁(yè)電子畫(huà)板主要用于涂鴉、繪畫(huà)、對(duì)圖像網(wǎng)頁(yè)進(jìn)行標(biāo)注等，總體思路是網(wǎng)頁(yè)中設(shè)置一個(gè)div層，在該層中添加Canvas元素作為畫(huà)板，然后添加幾個(gè)繪畫(huà)工具按鈕（如畫(huà)筆、直線、圓、矩形、取色板、線條大小）。

按下畫(huà)筆按鈕是自由繪畫(huà)狀態(tài)，可以用鼠標(biāo)自由繪畫(huà)；按下直線、圓、矩形按鈕繪制相應(yīng)的圖像；按下取色板彈出一個(gè)浮動(dòng)層，該浮動(dòng)層中也包含一個(gè)Canvas元素，繪制出取色板的各種顏色，通過(guò)點(diǎn)擊取色板區(qū)域獲取顏色值；按下線條大小按鈕，彈出一個(gè)浮動(dòng)層，該浮動(dòng)層中包含一個(gè)下拉菜單，用于設(shè)置線條的粗細(xì)值。

為了實(shí)現(xiàn)對(duì)圖像網(wǎng)頁(yè)等進(jìn)行批注，將畫(huà)板所在的層也設(shè)置成浮動(dòng)層，然后在網(wǎng)頁(yè)中添加一個(gè)iframe元素和文本框，在文本框中輸入網(wǎng)址或者本地圖像地址，通過(guò)Javascript動(dòng)態(tài)設(shè)置iframe的src屬性，實(shí)現(xiàn)圖像和網(wǎng)址的動(dòng)態(tài)載入。畫(huà)板漂浮在iframe之上，這樣就可以對(duì)圖像或者網(wǎng)頁(yè)進(jìn)行批注了。

對(duì)于圖像的保存，將每筆繪畫(huà)的參數(shù)都記錄下來(lái)，然后通過(guò)Ajax提交到服務(wù)器上。

3 第三章 詳細(xì)設(shè)計(jì)

3.1 創(chuàng)建畫(huà)布

3.2 自由繪畫(huà)

鼠標(biāo)按下（mousedown事件）開(kāi)始繪畫(huà)，線條跟隨鼠標(biāo)坐標(biāo)移動(dòng)，鼠標(biāo)彈起 （mouseup事件）結(jié)束繪畫(huà)。繪畫(huà)核心Javascript代碼如下：

3.3 繪制直線

與自由繪畫(huà)類(lèi)似，區(qū)別在于自由繪畫(huà)是線條跟隨鼠標(biāo)移動(dòng)，而畫(huà)直線在鼠標(biāo)按下時(shí)獲取起始點(diǎn)坐標(biāo)，鼠標(biāo)移動(dòng)過(guò)程中不進(jìn)行繪畫(huà)，等到鼠標(biāo)彈起時(shí)獲取目標(biāo)點(diǎn)坐標(biāo)，然后才根據(jù)這兩個(gè)點(diǎn)繪制直線。代碼與自由繪畫(huà)的核心代碼一樣。

3.4 繪制圓

畫(huà)圓在鼠標(biāo)按下時(shí)獲取圓點(diǎn)坐標(biāo)，鼠標(biāo)移動(dòng)過(guò)程中不進(jìn)行繪畫(huà)，等到鼠標(biāo)彈起時(shí)獲取目標(biāo)點(diǎn)坐標(biāo)，然后計(jì)算半徑大小，最后根據(jù)圓點(diǎn)坐標(biāo)和半徑大小繪制圓。繪畫(huà)核心Javascript代碼如下：

3.5 繪制矩形

畫(huà)矩形，也是采用類(lèi)似直線的兩點(diǎn)方式，鼠標(biāo)按下獲取矩形的左上角坐標(biāo)，鼠標(biāo)彈起獲取矩形的右下角坐標(biāo)，長(zhǎng)和寬根據(jù)兩點(diǎn)坐標(biāo)相減獲得。

3.6 取色板

取色板是采用矩形填充方式生成的，從紅色漸變到綠色，再漸變到藍(lán)色。取色則是根據(jù)鼠標(biāo)按下的坐標(biāo)，換算成相應(yīng)的RGB值，然后設(shè)置主畫(huà)布2D渲染對(duì)象的strokeStyle。以下是生成取色板的Javascript代碼：

3.7 設(shè)置線條大小

設(shè)置線條大小比較簡(jiǎn)單，就是將下來(lái)框獲取到的值賦值給主畫(huà)布2D渲染對(duì)象的lineWidth屬性。Javascript代碼如下:

3.8 iframe 動(dòng)態(tài)載入

通過(guò)設(shè)置iframe的src值，實(shí)現(xiàn)iframe內(nèi)容的動(dòng)態(tài)載入。Javascript代碼如下:

4 總結(jié)

本文介紹了HTML5的特性，提出使用Canvas進(jìn)行網(wǎng)頁(yè)電子畫(huà)板設(shè)計(jì)的設(shè)計(jì)思路及具體實(shí)現(xiàn)，實(shí)踐證明繪制圖形效果良好。HTML5作為下一代HTML標(biāo)準(zhǔn)，將來(lái)將為我們帶來(lái)更多的驚喜。