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


Posted in Javascript onOctober 16, 2020

说到绘图、报表之类的技术,大家首先想到的就是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的本地运行环境下的厂家支持程度。

浏览器支持情况:

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

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

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

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

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

对于VML

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

来看一个VML的绘图效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
javascript轮播图算法
Oct 21 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
vue实现购物车的监听
Apr 20 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 #Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 #Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
vue使用swiper实现左右滑动切换图片
Oct 16 #Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 #Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 #Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
强制设为首页代码
2006/06/19 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
JS中递归函数
2016/06/17 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python常用的爬虫技巧总结
2016/03/28 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
基于python中theano库的线性回归
2018/08/31 Python
Python自动抢红包教程详解
2019/06/11 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python与idea的集成的实现
2020/11/20 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
某公司面试题
2012/03/05 面试题
士力架广告词
2014/03/20 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
五四青年节的活动方案
2014/08/20 职场文书
借款协议书
2014/09/16 职场文书