浏览器端图表渲染技术SVG, VML HTML Canvas

简介: 最近一直在研究浏览器端的图形图表绘制技术,从种类上可以分为两种: 一类是矢量图形绘制API,典型代表是微软的VML与W3C主推的SVG 另外一类是基于像素的绘制API,典型代表是HTML5 Canvas   背景介绍: VML是微软推出的基于IE的矢量图形绘制API,注意VML只能在IE中支持,而SVG是W3C 推出的矢量图型API,显然IE不待见它,所以只能在非IE的浏览器上支持,IE上要想显示 SVG格式的图形,必须额外安装插件。

最近一直在研究浏览器端的图形图表绘制技术,从种类上可以分为两种:

一类是矢量图形绘制API,典型代表是微软的VML与W3C主推的SVG

另外一类是基于像素的绘制API,典型代表是HTML5 Canvas

 

背景介绍:

VML是微软推出的基于IE的矢量图形绘制API,注意VML只能在IE中支持,而SVG是W3C

推出的矢量图型API,显然IE不待见它,所以只能在非IE的浏览器上支持,IE上要想显示

SVG格式的图形,必须额外安装插件。

HTML5 Canvas是W3C推出的新一代浏览器端绘图API,微软从IE9+开始支持HTML5

Canvas渲染技术,其它主流浏览器都支持该技术。

 

技术优缺点:

VML是基于XML方式来组织绘制对象,支持相对与绝对定位方式,同时支持group元素,

可以将一组元素对象绘制在一个group元素上,group上默认支持绝对定位方式绘制图形

VML技术绘制的图形每个都是元素对象,可以任意添加鼠标监听事件,而且每个元素对

内置支持tooltip功能,但是VML本身不支持动画。不支持单独的文字绘制,文字绘制

必须依附其它顶级的VML 元素。同时微软在IE8时候的改动,导致VML在不同的IE浏览

器版本上使用略有不同。一个最常用的支持VML调用JavaScript脚本如下:

var e=["shape","shapetype","group","background","path","formulas",

"handles","fill","stroke","shadow","textbox","textpath","imagedata","line",

"polyline","curve","roundrect","oval","rect","arc","image"],

s=document.createStyleSheet();

for(var i=0; i<e.length;i++) {

s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");}

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

}

VML支持2D与3D渲染技术,可以绘制出效果非常好的图行。当前支持VML技术绘制的

开源的前端图表库有很多,可能大家最熟悉就是JQuery的图表库与Highchart的图表库

 

SVG技术与VML技术都是提供矢量图形绘制元素,绘制图形上每个元素都支持鼠标监听

SVG比VML做的好地方就是文本绘制,直接支持文本对象,不得不说VML的文本绘制太

TMD的变态。SVG也是基于XML文本描述的,这点跟VML非常相似。值得称赞的是SVG

的JavaScript调用非常的容易与简洁。同样IE6~IE8都不支持SVG渲染与显示,解决办

就自己装个adobe的SVG Viewer插件,IE9+之后版本支持SVG,所以说IE才是最坑

爹的浏览器,而且是在中国使用人数最多的浏览器,这都拜微软捆绑销售所赐。

 

HTML5 Canvas是W3C推出来用来替代SVG的前端图形技术,Canvas是基于像素的渲

染技术实现,所以它跟SVG与VML相比,放大与缩小很麻烦,位图大家都懂。但是

Canvas相比VML与SVG还是有很多优点,第一个废除了每个绘制元素都是对象的做法,

浪费资源啊!支持操作图像像素,可以支持Base64编码,在前端就可以保存为图像,

这个都是SVG与VML做不到的啊,Canvas借鉴编程语言图形库的设计思想,对有图形

开发经验的人掌握起来非常容易。而VML与SVG是基于XML的设计,只能通过

JavaScript来操作元素,只有对每个元素指定一个ID,你才可以获取到它,而Canvas支

持擦除与重绘制非常的方便。

 

最后想瞎掰一下那些开源的前端图表库

名头最吓人的应该是Google推出的google chart开源前端图表库,据它自己说基于

HTML5与SVG技术,在老版本的IE上使用VML技术。

功能最强大的应该是HighChart图表库,官方说它们是基于SVG与VML技术,下一

个版本将融入HTML5技术

canvasXpress自己说是完全标准的HTML5技术实现的图表库,但是如果想在IE9之

下版本支持必须额外包括FlashCanvas 或者ExplorerCanvas,而且还说IE上面运行很

慢,建议IE上使用时安装Google iframe框架。

RGraph自己说是完全HTML5技术实现,实际上是VML 与HTML Canvas混合实现,

支持大多数主流浏览器。

 

这些都国外的,国内淘宝有个开源的前端图表库,但是支持的功能实在有限,通用性

有待提高。

 

SVG, VML, HTML5 Canvas三种前端图形渲染技术,没有一种是可以支持全部浏览

器的,这个就给实际项目中使用带来不变,一般都会借助开源的图表框架实现跨浏览

器支持。

转载请注明-gloomyfish

目录
相关文章
|
5月前
|
前端开发
html渲染优先级
html渲染优先级
48 0
|
16天前
|
数据采集 存储 运维
无头浏览器与请求签名技术
本文分享了在面对Cloudflare防护(如Amazon网站)时,如何通过无头浏览器、请求签名技术和爬虫代理IP实现数据采集的故障排查与改进方案。首先,介绍了从常规请求失败到引入Selenium无头浏览器的过程,解决了Cookie和User-Agent检测问题。接着,通过生成请求签名绕过二次验证,并利用代理IP规避访问风险。最后,提出了架构改进方案,包括无头浏览器集群化、签名算法优化、代理池管理和多层次容错机制,以提高系统的稳定性和扩展性。示例代码展示了如何设置代理、获取Cookie并生成签名,成功采集商品信息。
无头浏览器与请求签名技术
|
2月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
69 29
|
2月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
25 1
|
6月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
65 5
|
6月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
4月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
46 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
4月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
63 0
HTML5 Canvas制作的粒子十秒倒计时源码