最近一直在研究浏览器端的图形图表绘制技术,从种类上可以分为两种:
一类是矢量图形绘制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
分享到:
相关推荐
SVG、CANVAS、VML比较,有利于各位IT大神学习,在学习画图方面的提高。
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
Seen.js:将3D场景渲染成SVG或HTML 5 Canvas
svg转为canvas
Highcharts JS 是一个基于 SVG 和 VML 渲染的 JavaScript 图表库
动态图表HTML5 svg阶梯图表_html5阶梯数据图表 动态图表HTML5 svg阶梯图表_html5阶梯数据图表 动态图表HTML5 svg阶梯图表_html5阶梯数据图表
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说,该库使您可以使用canvas api构建SVG文档。 为什么要使用它? 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
zrender-3.1.2-master :轻量级、高性能、MVC架构、二维渲染引擎(提供 Canvas、SVG、VML 等多种渲染方式)、完整源码!
酷炫的svg与canvas结合动画
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
二者的功能 相似,可以满足大多数WEB二维图形应用的需求,但目前的情况是:VML只能在IE中使用,SVG被firefox,opera等浏览器的最新版本支持, 并且是W3C制定的开放标准,但目前IE不内置支持SVG,只能通过ADOBE的SVG...
HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码
9种不同的图像和填充纹理图片效果,分别使用html5 svg,html5 canvas和css3背景技术完成,想学习的就来吧!
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在
最新canvg.js,完美将svg转为canvas
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas 然后就是将canvas转成图片了,这个更加简单了 ...
将svg画布内容转成canvas,转换成png图片下载,基于IE
时尚Fashion是一个JavaScript图形库,旨在为SVG,VML,Canvas和WebGL提供统一的接口。 其中很多东西都受到RaphaelJS和PaperJS的启发。如何建造 $ make-> fashion.js is the Script.执照根据MIT许可证授予使用它的...
主要介绍了vue动态渲染svg、添加点击事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧