說到繪圖、報表之類的技術(shù)，大家首先想到的就是Flex，當(dāng)然也有許多了解javaapplet，對于這兩種技術(shù)來說，各有利弊。首先Flex很笨重，但是其效果實在讓人喜歡。對于javaapplet來說，至少我在網(wǎng)絡(luò)上很少看到，當(dāng)然對于我們做開發(fā)的來說在我們的開發(fā)工具或者內(nèi)部網(wǎng)絡(luò)上還是有一些的。

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

如果你已經(jīng)在網(wǎng)絡(luò)上看了一會了我們可以繼續(xù)來聊一下Web中JS繪圖的內(nèi)容。

工具插件滿天飛，你也可以看到對于JS繪圖的支持來說，JQuery和EXT都沒有放松，特別是基于JQuery的插件不盡其數(shù)。可是我要說的不是這些工具插件，我主要想說一下瀏覽器對于繪圖的支持方面。也許你會發(fā)現(xiàn)，某些繪圖插件并不能支持所有瀏覽器，這是怎么回事呢？

對于JS圖形方面的支持，主要關(guān)注三個詞：SVG，VML，CANVAS。

對于SVG

可縮放矢量圖形（Scalable Vector Graphics，SVG）是基于可擴展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個開放標(biāo)準(zhǔn)。2008年12月22日，SVG Tiny 1.2成為W3C的推薦標(biāo)準(zhǔn)，W3C目前正在研究制定SVG 1.2版本。

由于SVG文件可嵌入JavaScript（嚴(yán)格地說，應(yīng)該是ECMAScript）腳本來控制SVG對象，所以在進行Web中JS繪圖時算是考慮的一種。

但是，SVG還是面臨一些問題的。SVG面臨的主要問題一個是如何和已經(jīng)占有重要市場份額的矢量圖形格式Adobe Flash競爭的問題，另一個問題就是SVG的本地運行環(huán)境下的廠家支持程度。

瀏覽器支持情況：

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

來看一個SVG的繪圖效果：

對于Canvas

Canvas元素是HTML5的一部分，允許腳本動態(tài)渲染位圖像。最初由蘋果公司內(nèi)部使用，后來才有人組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。對于該元素，首先來說的就是瀏覽器支持方面。Firefox，Safari和Opera9都支持canvas tag，canvas用來繪制2D圖形。但是IE不支持canvas。Google就開發(fā)了excanvas，模擬canvas在其他瀏覽器的狀態(tài)。excanvas目前版本為excanvas_r3，還有許多Bug，另外在IE上使用效率絕對是個問題，因為excanvas其實是使用IE中VML來實現(xiàn)canvas效果的。

看一下Demo中繪圖效果：

對于VML

VML的全稱是Vector Markup Language(矢量可標(biāo)記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質(zhì)量，這在制作地圖上有很大用途。但是VML只是被IE支持。

來看一個VML的繪圖效果：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。