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

2011-06-16 11:01:00李伙欽

科技視界 2011年25期

關鍵詞：設置

李伙欽

（福建船政交通職業學院信息工程系福建福州 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定義了

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

2 第二章設計總體思路

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

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

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

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

3 第三章詳細設計

3.1 創建畫布

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標準，將來將為我們帶來更多的驚喜。