HTML5網頁電子畫板的設計與實現

李伙欽

（福建船政交通職業學院信息工程系 福建 福州 350007）

0 引言

隨著信息技術的迅猛發展，上網已成為很多人生活中必不可少的一部分，人們通過網站獲取資訊，下載影音，社交通信等，其得益于HTML的標準化，網頁可以無障礙的在各種平臺各種操作系統上運行。上一版本的HTML標準是2001的XHTML1.1標準，十幾年來一直沒有更新，漸漸跟不上用戶的需求了。最新的HTML5標準應運而生，為我們帶來了強大的用于交互、多媒體和本地化等方面的標簽以及應用編程接口。

HTML5一個非常實用的特性是用于繪畫的Canvas元素，Canvas擁有多種繪制路徑、矩形、圓形、字符以及圖像處理的方法，為網頁繪圖及圖像處理帶來了便捷。

本文介紹了HTML5的特性及Canvas元素的相關概念，然后介紹采用Canvas制作網頁電子畫板的設計思路，分析其設計步驟及注意事項。

本文的組織結構，第一章介紹HTML5概念，第二章介紹設計總體思路，第三章介紹詳細設計，最后總結。

1 第一章 相關技術

1.1 HTML5

HTML標準自1999年12月發布的HTML 4.01后，后繼的 HTML 5和其它標準被束之高閣，為了推動web標準化運動的發展，一些公司聯合起來，成立了一個叫做WHATWG (Web超文本應用技術工作組）的組織，HTML5草案的前身名為Web Applications 1.0，于 2004年被 WHATWG提出，于 2007年被W3C接納，并成立了新的 HTML工作團隊。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有兩大特點：首先，強化了 Web網頁的表現性能。其次，追加了本地數據庫等Web應用的功能。

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

1.1.1 用于繪畫的 canvas元素

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

1.1.3 對本地離線存儲的更好的支持

1.1.4 新的特殊內容元素，比如 article、footer、header、nav、section

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

1.2 Canvas

HTML5定義了＜canvas＞元素作為位圖畫布在瀏覽器中的相關解決方案，它用于渲染圖形，游戲圖像或者其他飛行中的視覺圖形。一個Canvas代表了頁面中的一個矩形區域，在這個區域里面，你可以用Javascript來畫你想畫的任何東西。HTML5定義了一系列的方法用來畫圖形，定位路徑，創建漸變以及將圖形變形。

HTML5 Canvas的功能讓人自然聯想到Flash，同樣用來繪制圖像和動畫，Flash目前的產品成熟度和用戶接受度都是很高的，Flash無論是在矢量圖還是位圖的繪制上效率都略高于HTML5 Canvas。HTML5 Canvas的優勢主要在無須另外安裝插件即可播放，與網頁其他元素的容易融合協作。

2 第二章 設計總體思路

網頁電子畫板主要用于涂鴉、繪畫、對圖像網頁進行標注等，總體思路是網頁中設置一個div層，在該層中添加Canvas元素作為畫板，然后添加幾個繪畫工具按鈕（如畫筆、直線、圓、矩形、取色板、線條大小）。

按下畫筆按鈕是自由繪畫狀態，可以用鼠標自由繪畫；按下直線、圓、矩形按鈕繪制相應的圖像；按下取色板彈出一個浮動層，該浮動層中也包含一個Canvas元素，繪制出取色板的各種顏色，通過點擊取色板區域獲取顏色值；按下線條大小按鈕，彈出一個浮動層，該浮動層中包含一個下拉菜單，用于設置線條的粗細值。

為了實現對圖像網頁等進行批注，將畫板所在的層也設置成浮動層，然后在網頁中添加一個iframe元素和文本框，在文本框中輸入網址或者本地圖像地址，通過Javascript動態設置iframe的src屬性，實現圖像和網址的動態載入。畫板漂浮在iframe之上，這樣就可以對圖像或者網頁進行批注了。

對于圖像的保存，將每筆繪畫的參數都記錄下來，然后通過Ajax提交到服務器上。

3 第三章 詳細設計

3.1 創建畫布

＜canvas id="canvas"width="200"height="100"＞＜/canvas＞

3.2 自由繪畫

鼠標按下（mousedown事件）開始繪畫，線條跟隨鼠標坐標移動，鼠標彈起（mouseup事件）結束繪畫。繪畫核心Javascript代碼如下：

3.3 繪制直線

與自由繪畫類似，區別在于自由繪畫是線條跟隨鼠標移動，而畫直線在鼠標按下時獲取起始點坐標，鼠標移動過程中不進行繪畫，等到鼠標彈起時獲取目標點坐標，然后才根據這兩個點繪制直線。代碼與自由繪畫的核心代碼一樣。

3.4 繪制圓

畫圓在鼠標按下時獲取圓點坐標，鼠標移動過程中不進行繪畫，等到鼠標彈起時獲取目標點坐標，然后計算半徑大小，最后根據圓點坐標和半徑大小繪制圓。繪畫核心Javascript代碼如下：

3.5 繪制矩形

畫矩形，也是采用類似直線的兩點方式，鼠標按下獲取矩形的左上角坐標，鼠標彈起獲取矩形的右下角坐標，長和寬根據兩點坐標相減獲得。

3.6 取色板

取色板是采用矩形填充方式生成的，從紅色漸變到綠色，再漸變到藍色。取色則是根據鼠標按下的坐標，換算成相應的RGB值，然后設置主畫布2D渲染對象的strokeStyle。以下是生成取色板的Javascript代碼：

3.7 設置線條大小

設置線條大小比較簡單，就是將下來框獲取到的值賦值給主畫布2D渲染對象的lineWidth屬性。Javascript代碼如下：

3.8 iframe 動態載入

通過設置iframe的src值，實現iframe內容的動態載入。Javascript代碼如下：

4 總結

本文介紹了HTML5的特性，提出使用Canvas進行網頁電子畫板設計的設計思路及具體實現，實踐證明繪制圖形效果良好。HTML5作為下一代HTML標準，將來將為我們帶來更多的驚喜。