关于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的本地运行环境下的厂家支持程度。

浏览器支持情况：

对于浏览器支持方面，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的绘图效果：

对于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中绘图效果：

 

对于VML
 VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。但是VML只是被IE支持。

来看一个VML的绘图效果：

 

 

请您到ITEYE看我的原创：http://cuisuqiang.iteye.com

或支持我的个人博客，地址：http://www.javacui.com