浏览器端的绘图技术从种类上可以分为:基于像素的绘制API,典型代表是 HTML5 Canvas;矢量图形绘制API,典型代表是微软的 VML 与 W3C主推的SVG;3D图形API,典型代表是 WebGL;它们都是原生的浏览器绘图技术,不用安装第三方插件。
HTML5 Canvas
HTML5 Canvas是基于像素的渲染技术实现,放大与缩小很麻烦,位图大家都懂。Canvas 只是一个html标签元素,自己并没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上,拥有绘制路径,矩形,圆,字符以及图像等功能。支持操作图像像素,可以支持Base64编码,在前端就可以保存为图像,Canvas借鉴编程语言图形库的设计思想,对有图形开发经验的人掌握起来非常容易。微软从IE9+开始支持HTML5 Canvas渲染技术,其它主流浏览器都支持该技术。如果要在IE8和早期的IE版本使用canvas,可以使用ecxcanvas.js插件,它是利用IE支持的VML对象来模拟Canvas的绘图的。
SVGSVG 指可缩放矢量图形(Scalable Vector Graphics),是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。 SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,具有交互性和动态性, 完全支持DOM。因此是一种和图像分辨率无关的矢量图形格式。IE9,火狐,谷歌Chrome,Opera和Safari都支持SVG。IE8和早期版本需额外安装一个插件,如adobe的SVG Viewer插件。
VMLVML的全称是Vector Markup Language(矢量可标记语言),矢量的图形。但是VML只是被IE支持。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,VML其实是Word和HTML结合的产物。微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。
WebGLWebGL全称是Web-based Graphics Language,WebGL是一个跨平台、免费的底层3D绘图API的Web标准,它基于OpenGL ES 2.0标准。WebGL是网页上渲染三维图形图像的技术,它本身是HTML5规范的一部分。这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。目前支持WebGL的浏览器有 IE11+、Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12 + 。