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

　　關鍵詞： 計算機論文投稿,Canvas,繪圖,寫字本,事件

　　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 引言

　　Canvas API是HTML5規(guī)范中在瀏覽器中繪圖的程序接口，它為開發(fā)人員提供了一套二維繪圖系統(tǒng)，在Canvas畫布上融合javascript可以動態(tài)地生成和展示各種圖像和動畫，從而進行各種手機游戲開發(fā)、圖表制作以及動態(tài)橫幅廣告展示等。在此之前，開發(fā)人員若要在瀏覽器中繪圖，只能使用Adobe的 Flash和SVG(Scalable Vector Graphics，可伸縮矢量圖形)，然而使用Flash的解決方案需要借助Flash Player插件來實現(xiàn)，而此插件不停地更新版本，這也會對用戶造成一定的困擾。本文分析了完全靠瀏覽器實現(xiàn)的Canvas與SVG這兩種繪圖方案的區(qū)別，以一個在線寫字本為例，闡述采用Canvas API在瀏覽器中根據(jù)用戶輸入進行繪圖的方法的優(yōu)劣。

　　1 SVG和Canvas繪圖技術比較

　　SVG全稱是Scalable Vector Graphics，即可伸縮矢量圖形，是使用XML來描述二維圖形和繪圖程序的語言[1]。同Canvas API一樣，SVG是一套在客戶端生成繪圖的解決方案，相比在服務器端生成的繪圖技術來說，在客戶端生成的繪圖技術充分利用客戶端瀏覽器這個強大的工具，不需要預先在服務器上讀取和分析數(shù)據(jù)，可以有效地減輕服務器的壓力，降低帶寬的損耗，從而提高繪圖的效率。Canvas和SVG都是基于 javascript腳本的解決方案，兩者的區(qū)別在于：

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

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

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

　　Canvas API是通過在網(wǎng)頁上繪制一個矩形畫布來實現(xiàn)繪圖的，因此首先需要在網(wǎng)頁中添加Canvas的矩形區(qū)域，設置其位于瀏覽器的最上層，添加CSS樣式規(guī)則為 “z-index：3”，使其能捕獲用戶的鼠標動作，并預先定義好它的長寬，否則如果在CSS或JS中二次定義的話，會使圖形發(fā)生按比例縮小或放大的情況 [3]。其次，在javascript標簽中使用getContext(“2d”)方法來獲取二維平面圖的上下文環(huán)境，就類似于畫家手中拿的畫筆，使用這個對象，就可以使用Canvas程序中的代碼接口實現(xiàn)各種圖形的繪制。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ù)用戶鼠標的位置來判斷用戶寫字的筆劃。其代碼總結(jié)如表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 結(jié)束語

　　Canvas繪圖是HTML5這個新的標準中推出的繪圖程序接口，它可以不借助于任何插件，根據(jù)用戶輸入進行繪圖，實現(xiàn)良好的交互效果。它基于客戶端 javascript腳本來實現(xiàn)，結(jié)合HTML5的其他技術可以實現(xiàn)兼容不同移動平臺的移動游戲開發(fā)、數(shù)據(jù)圖表展示以及在線繪圖等功能。雖然相比于 SVG，它還存在一定的不足，但是隨著瀏覽器實現(xiàn)技術的提升以及人們對Web應用的需求變得越來越高，它一定會展現(xiàn)出良好的應用前景。

　　參考文獻：

　　[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實例教

---

轉(zhuǎn)載請注明來自：http://www.jinnzone.com/jisuanjiwangluolw/44541.html