1. 程式人生 > 程式設計 >JS頁面動態繪圖工具SVG,Canvas,VML介簡介

JS頁面動態繪圖工具SVG,Canvas,VML介簡介

說到繪圖、報表之類的技術,大家首先想到的就是Flex,當然也有許多瞭解javaapplet,對於這兩種技術來說,各有利弊。
首先Flex很笨重,但是其效果實在讓人喜歡。對於javaapplet來說,至少我在網路上很少看到,當然對於我們做開發的來說在我們的開發工具或者內部網路上還是有一些的。

其實現在Web上進行繪圖的話還是有很多選擇的,你可以到谷歌上搜索JS繪圖,會有很多繪圖工具提供給你使用,而且功能非常強大。比如說maxGraph,你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。

如果你已經在網路上看了一會了我們可以繼續來聊一下Web中JS繪圖的內容。

工具外掛滿天飛,你也可以看到對於JS繪圖的支援來說,JQuery和EXT都沒有放鬆,特別是基於JQuery的外掛不盡其數。

可是我要說的不是這些工具外掛,我主要想說一下瀏覽器對於繪圖的支援方面。也許你會發現,某些繪圖外掛並不能支援所有瀏覽器,這是怎麼回事呢?

對於JS圖形方面的支援,主要關注三個詞:SVG,VML,CANVAS。

對於SVG

可縮放向量圖形(Scalable Vector Graphics,SVG)是基於可擴充套件標記語言(XML),用於描述二維向量圖形的一種圖形格式。SVG由W3C制定,是一個開放標準。2008年12月22日,SVG Tiny 1.2成為W3C的推薦標準,W3C目前正在研究制定SVG 1.2版本。

由於SVG檔案可嵌入JavaScript(嚴格地說,應該是ECMAScript)指令碼來控制SVG物件,所以在進行Web中JS繪圖時算是考慮的一種。

但是,SVG還是面臨一些問題的。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的向量圖形格式Adobe Flash競爭的問題,另一個問題就是SVG的本地執行環境下的廠家支援程度。

瀏覽器支援情況:

JS頁面動態繪圖工具SVG,Canvas,VML介簡介

對於瀏覽器支援方面,Mozilla Firefox自版本1.5發行後,即開始支援SVG格式的顯示,Opera 8.0 版開始支援顯示Tiny 1.1規格的SVG,Google Chrome和Safari支援SVG顯示,Microsoft的Internet Explorer 8.0版之前尚未支援SVG,直至由Internet Explorer 9.0版開始支援SVG。也就是說,市場佔有率最大的IE到目前為止才剛剛開始支援,就是說普通人使用的IE瀏覽器是不能使用的,而且對於支援程度來說,對SVG支援最好的瀏覽器是Opera,它支援大多數的SVG特性,其他瀏覽器不能支援一些屬性。難道我們給客戶說你必須安裝Opera瀏覽器?

來看一個SVG的繪圖效果:

JS頁面動態繪圖工具SVG,Canvas,VML介簡介

對於Canvas

Canvas元素是HTML5的一部分,允許指令碼動態渲染點陣圖像。最初由蘋果公司內部使用,後來才有人組建議為下一代的網路技術使用該元素。
對於該元素,首先來說的就是瀏覽器支援方面。Firefox,Safari和Opera9都支援canvas tag,canvas用來繪製2D圖形。但是IE不支援canvas。Google就開發了excanvas,模擬canvas在其他瀏覽器的狀態。
excanvas目前版本為excanvas_r3,還有許多Bug,另外在IE上使用效率絕對是個問題,因為excanvas其實是使用IE中VML來實現canvas效果的。

看一下Demo中繪圖效果:

JS頁面動態繪圖工具SVG,Canvas,VML介簡介

對於VML

VML的全稱是Vector Markup Language(向量可標記語言),向量的圖形,意味著圖形可以任意放大縮小而不損失圖形的質量,這在製作地圖上有很大用途。但是VML只是被IE支援。

來看一個VML的繪圖效果:

JS頁面動態繪圖工具SVG,Canvas,VML介簡介

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。