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中的数字与字符串相加实例分析
Aug 14 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
SSM VUE Axios详解
Oct 05 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
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
详解JS数值Number类型
2018/02/07 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
Python地图绘制实操详解
2019/03/04 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
PyTorch-GPU加速实例
2020/06/23 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python datetime 如何处理时区信息
2020/09/02 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
康拓普公司Java笔面试
2016/09/23 面试题
优秀学生自我鉴定范例
2013/12/18 职场文书
2014年库房工作总结
2014/11/26 职场文书
项目建议书
2015/02/04 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书