`
cuisuqiang
  • 浏览: 3954358 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
3feb66c0-2fb6-35ff-968a-5f5ec10ada43
Java研发技术指南
浏览量:3665316
社区版块
存档分类
最新评论

关于JS页面动态绘图SVG,Canvas,VML介绍

    博客分类:
  • JS
阅读更多

说到绘图、报表之类的技术,大家首先想到的就是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

 

4
0
分享到:
评论
5 楼 cuisuqiang 2013-10-18  
D_M_C 写道
你有讲在页面用脚本动态绘制吗?编辑?跟标题不怎么符合啊- -!

这只是介绍,有几篇实际应用的
4 楼 D_M_C 2013-10-18  
你有讲在页面用脚本动态绘制吗?编辑?跟标题不怎么符合啊- -!
3 楼 cuisuqiang 2012-03-23  
dyllove98 写道
在文章底部标上 xxx的文章,在那里发布的。

参考 http://jlins.iteye.com/blog/1462150 下面的说明

dyllove98 写道
在文章底部标上 xxx的文章,在那里发布的。

参考 http://jlins.iteye.com/blog/1462150 下面的说明

好注意,我应该学习!
2 楼 dyllove98 2012-03-23  
在文章底部标上 xxx的文章,在那里发布的。

参考 http://jlins.iteye.com/blog/1462150 下面的说明
1 楼 cuisuqiang 2012-03-23  
太让人气氛了,这篇文章发博才20分钟,就被某小网站窃取!ITeye还有没有产权保护了!

相关推荐

    SVG、CANVAS、VML比较

    SVG、CANVAS、VML是三种用于在Web上创建矢量图形的方法,它们各有优缺点,适应不同的场景需求。 SVG(Scalable Vector Graphics)是一种基于XML的开放标准,被广泛支持,尤其在现代浏览器中,如Firefox和Opera。在...

    JS页面动态绘图工具SVG,Canvas,VML介简介

    其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大。比如说maxGraph,你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。 如果你...

    用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d

    GCanvas库通过操作DOM元素,特别是SVG或者VML(Vector Markup Language)元素,来模拟Canvas的绘图接口。在不支持SVG或VML的浏览器中,GCanvas可能使用图像精灵(image sprites)或者其他技术来实现图形绘制。 1. *...

    js 封装VML的饼图,柱状图,折线图

    4. **JavaScript封装**:封装这些图形库意味着将绘图逻辑组织成可重用的函数或类。这样,开发者可以在多个地方调用这些函数,只需传入相应的数据,就能自动生成对应的图表。封装的好处包括代码复用、减少错误以及...

    canvas.js html5.js 兼容ie

    通过"excanvas.js",开发者可以在IE上实现与非IE浏览器相似的Canvas绘图效果。 "html5.js"则可能是一个更全面的库,旨在为旧版IE提供更多的HTML5特性支持,不仅仅是Canvas,可能还包括其他如localStorage、Audio/...

    在网页中利用VML画图

    以下是一些关于如何使用VML进行绘图的关键知识点: 1. **基本元素**: - `v:shape`:定义形状,如矩形、椭圆、线条等。 - `v:stroke` 和 `v:fill`:分别用于设置线条样式和填充颜色。 - `v:textpath`:用于在...

    使用 HTML5 canvas 进行 Web 绘图

    JavaScript 与 Canvas 的结合是实现复杂绘图的关键。通过 JavaScript,开发者可以动态地改变图形的位置、大小、颜色等属性,甚至可以实现复杂的交互式效果。此外,JavaScript 还可以用来处理用户的输入事件,例如...

    让IE兼容 HTML5的canvas标签

    在页面中引入excanvas.js后,即使在不支持canvas的IE浏览器中,开发者也能利用canvas API进行图形绘制。 使用excanvas的步骤大致如下: 1. **引入excanvas.js**:在HTML文档的部分引入excanvas.js文件,通常会放在...

    canvas学习和滤镜实现代码

    与SVG和VML不同的是,Canvas基于JavaScript的绘图API,而不是使用XML文档描述绘图。 Canvas API提供了一个通过画布的getContext()方法获得的绘图环境对象,开发者通过这个对象来执行绘图操作。其API种类繁多,包括...

    canvas帮助文档pdf

    - **与SVG和VML的区别**:`<canvas>`与SVG(Scalable Vector Graphics)及VML的主要区别在于,前者提供了一套基于JavaScript的绘图API,而后者则是使用XML文档来描述图形。尽管它们在功能上可以相互模拟,但具体实现...

    ie-canvas.zip解决了ie8不支持canvas

    HTML5的Canvas元素是网页开发中的一个重要特性,它允许开发者在网页上动态绘制图形,提供了丰富的绘图功能,使得Web应用程序可以拥有与本地应用相媲美的交互体验。然而,不幸的是,早期版本的Internet Explorer...

    在线VML画图工具flashvml2&2

    4. **交互性**:VML图形可以与JavaScript结合,实现动态效果和用户交互,如响应鼠标事件、动画等。 5. **局限性**:VML主要局限在于它仅限于IE浏览器,而现代浏览器如Chrome、Firefox、Safari和Edge已不再支持。...

    VML统计图之直方图

    以下是关于VML、JS绘图、统计图、直方图以及条形图的详细知识点: 1. **VML (Vector Markup Language)**:VML 是一个基于XML的标记语言,用于在HTML文档中创建矢量图形。它可以精确地控制图形元素,如线条、曲线、...

    VML学习

    6. **替代方案**:考虑到VML的局限性,开发者通常会转向SVG或者使用Canvas(基于像素的绘图API)来实现矢量图形的Web渲染。SVG更被推荐,因为它是一种W3C标准,有更好的跨平台和跨浏览器兼容性。 7. **实际应用**:...

    vml中文教程(适合初学者)

    1. 事件处理:VML图形可以绑定JavaScript事件,如`onclick`、`onmouseover`等,实现动态交互。 2. 动画:虽然不如SVG强大,但可以通过JavaScript改变图形属性实现简单动画效果。 七、浏览器兼容性和替代方案 1. ...

    VML画图Demo

    综上所述,本篇代码示例详细展示了如何利用VML和JavaScript在网页中实现基本图形的绘制,包括直线的绘制过程以及通过监听鼠标事件实现动态绘图的功能。通过这种方式,可以快速构建简单的交互式图形应用。

    HTML5中Canvas与Flash的应用研究 (1).pdf

    (5)Canvas 不需要插件,与 Flash、SVG 和 VML 不同;(6)Canvas 主要用于图形的表示、绘制、以及游戏制作等。 二、Flash 在网页中的应用 Flash 是一种常用的网页动画技术, Flash 动画可以直接嵌入到网页中播放...

    Web开发中的矢量绘图处理和应用

    针对这一问题,本文旨在探讨几种不同的矢量绘图技术及其在现代Web开发中的应用,包括HTML5 Canvas、SVG(Scalable Vector Graphics)以及VML(Vector Markup Language)等技术。接下来将详细介绍这些技术的特点、...

    js兼容多浏览器统计图代码

    6. **js+vml+svg**: VML和SVG(Scalable Vector Graphics)都是用于在网页中表示矢量图形的方式。JavaScript可以用来操作VML(主要在IE中)和SVG(大多数现代浏览器都支持),从而实现跨浏览器的统计图表。SVG特别...

Global site tag (gtag.js) - Google Analytics