李岸芩

摘 要： 通過比較SVG和Canvas兩種繪圖機制，辨析了使用Canvas在網(wǎng)頁中繪圖方案的優(yōu)缺點。使用一個在線寫字本案例，論述了Canvas捕獲用戶的鼠標事件根據(jù)用戶輸入來繪圖的過程。最后總結了Canvas繪圖的特性以及應用前景。

關鍵詞： Canvas； 繪圖； 寫字本； 事件

中圖分類號：P315.69 文獻標志碼：A 文章編號：1006-8228（2014）08-17-02

Discussion about Canvas drawing scheme with example of notebook

Li Anqin

（Network Technology Department of South-China Institute of Software Engineering， Guangzhou， Guangdong 510990， China）

Abstract： By comparing two different drawing mechanisms between the SVG and the Canvas， the merits and drawbacks of Canvas scheme drawing pictures on web page are analyzed. With the example of notebook on Windows， the process of drawing picture through catching the user's input and mouse events is discussed. The features and application prospect of Canvas drawing scheme are summarized.

Key words： Canvas； drawing； notebook； event

0 引言

1 SVG和Canvas繪圖技術比較

⑴ Canvas繪制的圖像是由一組二維像素網(wǎng)格來表示的柵格圖形，而SVG繪制的矢量圖形是基于圖形本身的幾何特征來表示的[2]，因此，除非需要對Canvas區(qū)域重新渲染，否則使用Canvas繪制的圖像在放大或縮小時會失真；

⑵ 從搜索引擎角度來看，SVG繪圖中的文本能被搜索引擎獲取，而Canvas中的文本實際上是圖像的一部分，不能被搜索引擎識別；

⑶ SVG將畫布中的元素作為HTML的一部分，同DOM API構成了一個矢量的繪圖API，而Canvas不屬于網(wǎng)頁HTML的DOM結構或任何的命名空間，也不能直接檢測鼠標單擊了圖像的哪個點，因此需要借助鼠標坐標在圖像中的定位來實現(xiàn)。

綜上所述，相比起SVG繪圖來說，Canvas仍具有一些明顯的不足，但是HTML5規(guī)范中使用的是Canvas繪圖機制，說明其仍具有一定的優(yōu)勢，如：Canvas沒有將畫布中的的元素作為對象進行存儲，不需要在瀏覽器中大量地添加各種DIV元素，因此HTML代碼較簡潔，執(zhí)行效率較好。另外，對于開發(fā)人員來說，Canvas入門較簡單，而學習SVG需要有比較扎實的瀏覽器編程基礎。

2 Canvas繪圖的應用

Canvas繪圖的應用非常廣泛，既可以繪制靜態(tài)的展示性的統(tǒng)計圖表，也可以根據(jù)用戶輸入進行交互式的繪圖，包括各種矩形、弧形、不規(guī)則圖形等，為HTML5的游戲開發(fā)提供了豐富的創(chuàng)意空間，也使交互性的設計成為了可能。下面就以用戶輸入來繪圖的記事本為例說明Canvas繪圖的過程。

在記事本中允許用戶自己定義畫筆的顏色和粗細，采用HTML5中type="range"的input標簽可以創(chuàng)建允許用戶設置筆觸粗細的滑動條，使用type="color"的input輸入框創(chuàng)建控制筆觸顏色的選擇器。這里將灰色文字作為用戶描畫的藍本，置于Canvas對象的下一層，即“z-index：2”，將田字格的背景置于最底層，即“z-index：1”，建立修改畫筆屬性的表單，實現(xiàn)的界面如圖1所示。

通過給Canvas對象增加三個事件監(jiān)聽器，獲得用戶在田字格中使用鼠標寫字的動作，根據(jù)用戶鼠標的位置來判斷用戶寫字的筆劃。其代碼總結如表1所示。

首先，用戶按下鼠標表示開始繪圖，這是一個瞬間的事件，為MouseDown的事件添加名為“drawStart”函數(shù)，在該函數(shù)中使用全局變量記錄下用戶點擊鼠標的坐標位置作為繪圖的起點；用戶在移動鼠標（MouseMove）時，添加名為“drawLine”的事件，在該事件中獲取用戶設定的筆觸大小和顏色以進行繪圖，此事件會隨著用戶鼠標位置的移動不停地被執(zhí)行；最后，用戶松開鼠標時（MouseUp）為Canvas對象添加名為“drawEnd”的事件，通知瀏覽器停止繪圖。其中移動鼠標時繪圖的核心代碼如下：

drawWord=function（x1， y1， x2， y2） {

var c=document.getElementById（"myWrite"）；

if （c && c.getContext（"2d"）） {

var cxt=c.getContext（"2d"）；

//根據(jù)鼠標的位置

cxt.beginPath（）；

cxt.moveTo（x1， y1）；

cxt.lineTo（x2， y2）；

cxt.closePath（）；

//開始畫線，根據(jù)用戶的選擇來設置線條屬性

cxt.lineWidth=$（"#lineWidth"）.val（）；

cxt.strokeStyle=$（"#lineColor"）.val（）；

cxt.stroke（）；

}

}；

同時，用戶點擊其他文字的時候采用Canvas API的clearRect（）的方法清除用戶先前的繪圖痕跡，重新開始一副新的繪圖，最終實現(xiàn)效果如圖2所示。

通過以上案例可以看出，使用Canvas繪圖代碼較為簡單，有網(wǎng)頁設計基礎的人員都能夠掌握，它可以模擬逼真的鼠標寫字的效果，通過捕獲鼠標的坐標可以準確定位畫筆的位置，并提供個性化的畫筆屬性的選擇。但是也存在一定的缺陷，如果用戶移動鼠標過快，則呈現(xiàn)出的線條不夠流暢，線性只是單調(diào)的矩形，不能根據(jù)用戶按住鼠標的力度調(diào)整線條粗細等。但是上述情況在大多瀏覽器繪圖機制中都存在，因此有待瀏覽器繪圖技術的進一步發(fā)展來改善。需要注意的是，Canvas繪圖在不同的瀏覽器中的支持情況不同，本案例在下述瀏覽器中的測試情況如表2所示。

說明：“×”表示不支持，“○”表示能夠正確的呈現(xiàn)

3 結束語

參考文獻：

[1] 萬本庭，陳明.基于SVG的矢量圖形庫管理模型[J].計算機工程，

2006.2：65-67

[2] Peter Lubbers[荷]，Brian Albers[美]，F(xiàn)rank Salim[美]著，柳靖，李杰，劉

淼譯.HTML5程序設計（第二版）[M].人民郵電出版社，2012.

[3] Brian P.Hogan[美]著，李杰，劉曉娜，朱嵬譯.HTML5和CSS3實例教

程[M].人民郵電出版社，2012.