域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

這篇文章主要介紹了JS頁(yè)面動(dòng)態(tài)繪圖工具SVG，Canvas，VML介簡(jiǎn)介,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

說(shuō)到繪圖、報(bào)表之類的技術(shù)，大家首先想到的就是Flex，當(dāng)然也有許多了解javaapplet，對(duì)于這兩種技術(shù)來(lái)說(shuō)，各有利弊。

首先Flex很笨重，但是其效果實(shí)在讓人喜歡。對(duì)于javaapplet來(lái)說(shuō)，至少我在網(wǎng)絡(luò)上很少看到，當(dāng)然對(duì)于我們做開發(fā)的來(lái)說(shuō)在我們的開發(fā)工具或者內(nèi)部網(wǎng)絡(luò)上還是有一些的。

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

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

工具插件滿天飛，你也可以看到對(duì)于JS繪圖的支持來(lái)說(shuō)，JQuery和EXT都沒(méi)有放松，特別是基于JQuery的插件不盡其數(shù)。

可是我要說(shuō)的不是這些工具插件，我主要想說(shuō)一下瀏覽器對(duì)于繪圖的支持方面。也許你會(huì)發(fā)現(xiàn)，某些繪圖插件并不能支持所有瀏覽器，這是怎么回事呢？

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

對(duì)于SVG

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

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

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

瀏覽器支持情況：

對(duì)于瀏覽器支持方面，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。也就是說(shuō)，市場(chǎng)占有率最大的IE到目前為止才剛剛開始支持，就是說(shuō)普通人使用的IE瀏覽器是不能使用的，而且對(duì)于支持程度來(lái)說(shuō)，對(duì)SVG支持最好的瀏覽器是Opera，它支持大多數(shù)的SVG特性，其他瀏覽器不能支持一些屬性。難道我們給客戶說(shuō)你必須安裝Opera瀏覽器？

來(lái)看一個(gè)SVG的繪圖效果：

對(duì)于Canvas

Canvas元素是HTML5的一部分，允許腳本動(dòng)態(tài)渲染位圖像。最初由蘋果公司內(nèi)部使用，后來(lái)才有人組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。

對(duì)于該元素，首先來(lái)說(shuō)的就是瀏覽器支持方面。Firefox，Safari和Opera9都支持canvas tag，canvas用來(lái)繪制2D圖形。但是IE不支持canvas。Google就開發(fā)了excanvas，模擬canvas在其他瀏覽器的狀態(tài)。

excanvas目前版本為excanvas_r3，還有許多Bug，另外在IE上使用效率絕對(duì)是個(gè)問(wèn)題，因?yàn)閑xcanvas其實(shí)是使用IE中VML來(lái)實(shí)現(xiàn)canvas效果的。

看一下Demo中繪圖效果：

對(duì)于VML

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

來(lái)看一個(gè)VML的繪圖效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

來(lái)源：腳本之家

鏈接：https://www.jb51.net/article/197574.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！