浏览器端绘图技术SVG VML Canvas WebGL介绍

Posted 2021-04-25 全栈开发者中心

　　浏览器端的绘图技术从种类上可以分为：基于像素的绘制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的绘图的。

　SVG

　　SVG 指可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，具有交互性和动态性，完全支持DOM。因此是一种和图像分辨率无关的矢量图形格式。IE9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版本需额外安装一个插件，如adobe的SVG Viewer插件。

　VML

　　VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形。但是VML只是被IE支持。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，VML其实是Word和HTML结合的产物。微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。

　WebGL

　　WebGL全称是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 + 。