以寫字本為例辨析Canvas繪圖機(jī)制的優(yōu)劣

李岸芩

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

關(guān)鍵詞： Canvas； 繪圖； 寫字本； 事件

中圖分類號：P315.69 文獻(xiàn)標(biāo)志碼：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繪圖技術(shù)比較

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

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

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

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

2 Canvas繪圖的應(yīng)用

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

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

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

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

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

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

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

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

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

cxt.beginPath（）；

cxt.moveTo（x1， y1）；

cxt.lineTo（x2， y2）；

cxt.closePath（）；

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

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

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

cxt.stroke（）；

}

}；

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

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

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

3 結(jié)束語

參考文獻(xiàn)：

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

2006.2：65-67

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

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

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

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