insideBa11个人空间

# 14.Canvas 和 SVG 的异同

# SVG

SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。

# 什么是 SVG

  1. SVG 是一个基于文本的开放网络标准，用来定义用于网络的矢量图形
  2. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接
  3. SVG 使用 XML 格式定义图形
  4. SVG 是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

# SVG 的优点

  1. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  2. SVG 图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript 技术一起运行
  3. SVG 可在图像质量不下降的情况下被放大和缩小
  4. SVG 可被非常多的工具读取和修改（比如文本编辑器）
  5. SVG 图像不依赖分辨率，可在任何的分辨率下被高质量地打印
  6. SVG 文件是纯粹的 XML
  7. SVG 是开放的标准

# SVG 的缺点

  1. SVG 复杂度越高渲染速度就会越慢（任何过度使用 DOM 的应用都不快）
  2. SVG 不适合游戏应用，只能结合 Canvas 来实现
  3. SVG 不能动态的修改动画内容

# Canvas

# Canvas 的优点

  1. 内存占用恒定，就是像素点个数

# Canvas 的缺点

# Canvas 和 SVG 的不同点

# Canvas

  1. 通过 js 来绘制 2D 图形。
  2. canvas 图像单位是像素，依赖于分辨率，放大绘制的图形会失真
  3. canvas 不支持事件处理器
  4. canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。
  5. canvas 的文本渲染能力弱。
  6. canvas 适合图像密集型的游戏，频繁地重绘图像。
  7. canvas 绘制的图形可以多种格式 (jpg、png) 保存图片。
  8. canvas 适合开发游戏
  9. canvas 是基于位图的图像，它不能够改变大小，只能缩放显示；

# SVG

  1. svg 使用 XML 描述的 2D 图像。
  2. svg 是一种矢量图，svg 放大不会失真。
  3. svg 支持事件处理器
  4. svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。
  5. svg 中的文字独立于图像，文字可保留，可编辑和可搜索
  6. svg 绘制的复杂度高时减慢渲染的速度。
  7. svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
  8. svg 不适合游戏应用
  9. svg 是基于矢量的，所有它能够很好的处理图形大小的改变。

# 功能方面

  1. canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。
  2. 除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。

# 操作方面

  1. canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器
  2. 但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。

# canvas 为什么绘制比普通 DOM 快、

  1. JavaScript 同步操作的限制。所有的 DOM 操作都是同步的，会堵塞浏览器。JavaScript 操作 DOM 时，必须等前一个操作结束，才能执行后一个操作。只要一个操作有卡顿，整个网页就会短暂失去响应。浏览器重绘网页的频率是 60FPS（即 16 毫秒/帧），JavaScript 做不到在 16 毫秒内完成 DOM 操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。
  2. 网页是单线程的。所有工作都在这一个线程上完成，包括布局、渲染、JavaScript 执行、图像解码等等
  3. 网页没有硬件加速。网页都是由 CPU 处理的，没用 GPU 进行图形加速，canvas 可以被硬件加速

← 15.Flex 进阶 →