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 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
JavaScript入门基础
Aug 12 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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+jQuery递归调用POST循环请求示例
2016/10/14 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
php实现记事本案例
2020/10/20 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
详解javascript void(0)
2020/07/13 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python开发简易版在线音乐播放器
2017/03/03 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python 实现微信自动回复的方法
2020/09/11 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
监理资料员岗位职责
2014/01/03 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
经理聘任证明
2015/03/02 职场文书
银行求职信模板
2015/03/20 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
大学生暑假实习总结
2015/07/13 职场文书
公司人事管理制度
2015/08/05 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
Python list列表删除元素的4种方法
2021/11/01 Python