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

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

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


一类是矢量图形绘制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

相关文章
|
1月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`&lt;head&gt;`标签中,通过添加不同的`&lt;meta&gt;`标签可指定浏览器默认使用的内核。使用`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;
28 1
|
1月前
|
Web App开发 移动开发 JavaScript
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
23 5
|
12天前
|
数据采集 自然语言处理 大数据
​「Python大数据」词频数据渲染词云图导出HTML
使用Python,本文展示数据聚类和办公自动化,焦点在于通过jieba分词处理VOC数据,构建词云图并以HTML保存。`wordCloud.py`脚本中,借助pyecharts生成词云,如图所示,关键词如&quot;Python&quot;、&quot;词云&quot;等。示例代码创建了词云图实例,添加词频数据,并输出到&quot;wordCloud.html&quot;。
36 1
​「Python大数据」词频数据渲染词云图导出HTML
|
17天前
|
JavaScript 前端开发 物联网
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图
23 1
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
76 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
1月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
36 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
16天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
27天前
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
23 3