Abo

有了Canvas为什么还要使用SVG ?

Canvas, SVG, 和 WebGL三者之间的区别


choice-2692575_1280

Canvas - 位图
SVG - 矢量图
WebGL - 一套用3D画位图的API

        

位图与矢量图

位图,又称为点阵图像、像素图或栅格图像,是由称作像素(图片元素)的单个点组成。这些点可以进行不同的排列和染色以构成图样。

位图的单位:像素(Pixel)

位图的文件格式:位图的文件类型很多,如.bmp、.pcx、.gif、.jpg、.tif、photoshop的.psd、kodak photo CD的.pcd、corel photo paint的.cpt等。同样的图形,存盘成以上几种文件时文件的字节数会有一些差别,尤其是jpg格式,它的大小只有同样的bmp格式的1/20到1/35,这是因为它们的点矩阵经过了复杂的压缩算法的缘故。


矢量图,矢量又称为“向量”,矢量图形中的图形元素(点和线段)称为对象,每个对象都是一个单独的个体,它具有大小、方向、轮廓、颜色和屏幕位置等属性。简单地说,矢量图形软件就是用数学的方法来绘制矩形等基本形状。

矢量图形能重现清晰的轮廓,线条非常光滑、且具有良好的缩放性;因为图像中保存的是线条和图块的信息,与分辨率和图形大小无关,只与图像的复杂程度有关,所以图像文件所占的存储空间交较小;此外文字编辑能力强。

位图相比,在显示和打印方面都快的多;图形不真实生动,颜色不丰富。无法像照片一样真实地再现这个世界的景色。

矢量图的文件格式 :矢量图形格式也很多,如Corel DRAW的.cdr、Adobe Illustrator的.AI、.EPS和SVG、AutoCAD的.dwg和dxf、windows标准图元文件.wmf和增强型图元文件.emf等等。

主要区别

  1. SVG只是一种矢量图形文件格式, 不仅现在的浏览器都支持,很多主流的系统也都支持
  2. Canvas 是HTML5新增的一个元素对象,名副其实就是一个画布,浏览器 js 配有相应的操作api,可以不再依赖其他的API或组件而直接绘图,相当于2D的API
  3. WebGL 是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API (HTML5),WebGL主要是3D为主, 不过2D的绘图要求也可以变通来实现。WebGL 无论如何都需要一个显示对象来呈现,这个对象就是 Canvas,仅此而已,WebGL不对Canvas有任何附加的操作API, 那部分属于浏览器js支持的范畴

用途

  1. SVG矢量图,可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便。
  2. canvas一般用于绘制比较复杂的动画,做游戏之类的,由于canvas是HTML5带的,所以不支持低版本浏览器,特别是IE,canvas只是一个画布,绘制上去的东西,例如图片,都是转换成像素点绘制上去的,所以没有event事件,如果需要添加交互事件,需要自己手动计算绘制的对象所在坐标以及层级,还好这部分有第三方库.基本上除了HTML5游戏,一些酷炫的动画,正常的网页交互很少用到.
  3. WebGL 从名字上看就知道和OpenGL(Open Graphics Library)很像,暂且看作能在浏览器上运行的OpenGL吧,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的

总结

  1. Canvas 是需要自己画点的白板;

  2. SVG 是给数据就可以绘制点、线、图形的,基于 XML 的标记语言;

  3. WebGL 是基于 Canvas 的 3D 框架。

  4. Canvas 适用于位图,高数据量高绘制频率(帧率)的场景,如动画、游戏;

  5. SVG 适用于矢量图,低数据量低绘制频率的场景,如图形、图表;

  6. WebGL 主要用来做 3D 展示、动画、游戏。