说到绘图、报表之类的技术,大家首先想到的就是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
相关推荐
SVG、CANVAS、VML比较,有利于各位IT大神学习,在学习画图方面的提高。
SVG编辑器Method_draw SVG
Highcharts JS 是一个基于 SVG 和 VML 渲染的 JavaScript 图表库
自动选择SVG和VML的WEB页面 在WEB上使用二维图形编程的人员现在面临者一个两难的选择,是使用SVG,还是VML?二者的功能 相似,可以满足大多数WEB二维图形应用的需求,但目前的情况是:VML只能在IE中使用,SVG被...
实现圆环进度条的三种方式 div svg canvas 可加qq群:179916551 免积分获取,沟通交流
最新canvg.js,完美将svg转为canvas
其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大。比如说maxGraph,你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。 如果你...
酷炫的svg与canvas结合动画
svg转为canvas
利用SVG或VML在网页上实现3D的曲面效果,非常好
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
svgcanvas 我创建此存储库是因为我的需要一个模拟<canvas>元素。 这个库主要基于gliffy的出色工作: 。 如果您想要的是干净简单的canvas上下文API,则应使用 。 主要区别在于:此库还为元素添加了一些模拟API...
zrender-3.1.2-master :轻量级、高性能、MVC架构、二维渲染引擎(提供 Canvas、SVG、VML 等多种渲染方式)、完整源码!
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
将svg转成canvas需要用到google的一个插件canvg 接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas ...
SVG,VML,FLASH三种实现统计饼图的方式比较.pdf
SVG-edit的用户界面基于原始javascript和jQuery库。 该编辑器演示了带有React用户界面的SVG编辑“ svgcanvas”的用法。 它远没有原始的SVG-edit完整,但这是一个概念证明,我们可能决定在将来的SVGedit版本中使用。 ...
该库使用JavaScript将Canvas转换为SVG。 换句话说,该库使您可以使用canvas api构建SVG文档。 为什么要使用它? 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG...
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
基于VML和SVG的工作流程动态展示实现,自己开发工作流时可以用到,展示方便,用起来简单。