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 相关文章推荐
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
JavaScript 是什么意思
Sep 22 Javascript
js浏览器html5表单验证
Oct 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
Javascript webpack动态import
Apr 19 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实现的迷你漂流瓶
2015/07/29 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
交通事故调解协议书
2014/04/16 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
房屋转让协议书
2014/10/18 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP