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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
php基于redis处理session的方法
Mar 14 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
JS实现网站吸顶条
Jan 08 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
SMARTY学习手记
2007/01/04 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
详解Python中的多线程编程
2015/04/09 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
RIP版本1跟版本2的区别
2013/12/30 面试题
几个Shell Script面试题
2014/04/18 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
快餐公司创业计划书
2014/04/29 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL