這篇文章主要介紹了JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
說到繪圖、報表之類的技術(shù)，大家首先想到的就是Flex，當(dāng)然也有許多了解javaapplet，對于這兩種技術(shù)來說，各有利弊。
首先Flex很笨重，但是其效果實在讓人喜歡。對于javaapplet來說，至少我在網(wǎng)絡(luò)上很少看到，當(dāng)然對于我們做開發(fā)的來說在我們的開發(fā)工具或者內(nèi)部網(wǎng)絡(luò)上還是有一些的。
其實現(xiàn)在Web上進(jìn)行繪圖的話還是有很多選擇的，你可以到谷歌上搜索JS繪圖，會有很多繪圖工具提供給你使用，而且功能非常強(qiáng)大。比如說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）是基于可擴(kuò)展標(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對象，所以在進(jìn)行Web中JS繪圖時算是考慮的一種。
但是，SVG還是面臨一些問題的。SVG面臨的主要問題一個是如何和已經(jīng)占有重要市場份額的矢量圖形格式Adobe Flash競爭的問題，另一個問題就是SVG的本地運(yùn)行環(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í)有所幫助，也希望大家多多支持腳本之家。
來源：腳本之家
鏈接：https://www.jb51.net/article/197574.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
