這篇文章主要介紹了JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
說到繪圖、報表之類的技術，大家首先想到的就是Flex，當然也有許多了解javaapplet，對于這兩種技術來說，各有利弊。
首先Flex很笨重，但是其效果實在讓人喜歡。對于javaapplet來說，至少我在網絡上很少看到，當然對于我們做開發(fā)的來說在我們的開發(fā)工具或者內部網絡上還是有一些的。
其實現(xiàn)在Web上進行繪圖的話還是有很多選擇的，你可以到谷歌上搜索JS繪圖，會有很多繪圖工具提供給你使用，而且功能非常強大。比如說maxGraph，你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。
如果你已經在網絡上看了一會了我們可以繼續(xù)來聊一下Web中JS繪圖的內容。
工具插件滿天飛，你也可以看到對于JS繪圖的支持來說，JQuery和EXT都沒有放松，特別是基于JQuery的插件不盡其數(shù)。
可是我要說的不是這些工具插件，我主要想說一下瀏覽器對于繪圖的支持方面。也許你會發(fā)現(xiàn)，某些繪圖插件并不能支持所有瀏覽器，這是怎么回事呢？
對于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的本地運行環(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)渲染位圖像。最初由蘋果公司內部使用，后來才有人組建議為下一代的網絡技術使用該元素。
對于該元素，首先來說的就是瀏覽器支持方面。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(矢量可標記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量，這在制作地圖上有很大用途。但是VML只是被IE支持。
來看一個VML的繪圖效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
來源：腳本之家
鏈接：https://www.jb51.net/article/197574.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
