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

互联网世界
互联网世界
互联网世界
1297
文章
4
评论
2015年5月4日15:49:06 评论 1,762 1314字阅读4分22秒

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

相关链接:【推荐】五款超实用的开源SVG工具

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 + 。

互联网世界
  • 文本由 发表于 2015年5月4日15:49:06
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
  • 免责声明:文章为作者独立观点,不代表互联网世界立场
    本站网页部分文字及图片来源于网络,如侵犯到您的权益,请及时告知,我们将及时处理或删除。
八大安全浏览器介绍 安全百科

八大安全浏览器介绍

《连线》曾披露了Edward Snowden用于躲避NSA窥视的匿名操作系统Tails。Tails是一个Live操作系统,能安装在光盘、U盘和SD卡上,可以随身携带,需要时直接从光盘、U盘或SD卡启动...
SEO术语/专业名词 SEO优化

SEO术语/专业名词

301转向(30.1 Redirect) 也称为301重定向、301跳转。 301转向是用户浏览器或搜索引擎蜘蛛向网站服务器发出访问网址A的请求时,服务器返回的HTTP数据头信息状态码的一种,表示所请...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: