作者：Patrick Dengler，高级项目经理，Internet Explorer

Canvas 和 SVG 是 Internet Explorer 9 中推出的两个让人激动不已的图形特性，并且是可硬件加速的。这些技术可用于解决现代 web 上与图形有关的各种问题。由于 Canvas 更让人激动不已，人们开始遗忘 SVG，然而在很多情况下，SVG 反而是更好的选择。我将在本文中介绍何时选择 Canvas、SVG 或结合使用两者的一些想法。

Canvas和SVG概述

下面从较高的层面介绍 Canvas 和 SVG，旨在讨论如何在这两种矢量图形技术之间做出选择。

SVG 是一种保留模式 (retained mode)的图形模型，是一种在内存中进行持久处理的模型。类似于 HTML，SVG 构建了包含图元、属性和样式的对象模型。在 HTML5 文档中出现 <svg> 元素时，它的作用类似于一个内联块，并且是 HTML 文档树的一部分。

Canvas 是一种位图，采用直接模式 (immediate mode)的图形应用程序编程接口 (API) 在其上进行绘图。 Canvas 是一种“发后不理”(Fire and Forget) 模型，在这种模式下，将直接向位图呈现其图形，之后对绘制的形状并不知晓；最后只呈现生成的位图。 

可以认为 Canvas 类似于 Windows GDI API，您通过编程方式向窗口中绘制图形；而 SVG 类似于 HTML 标记，具有元素、样式、事件和基于 DOM 的编程能力。Canvas 是过程性的，而 SVG 是声明性的。

方案

以下各节介绍了这两种技术各自的优点和局限性，包括判断应该为给定任务选择哪种技术的一般方法。下图演示了从 Canvas 到 SVG 的范围内每种方案的位置，在两者之间有一个明显的交叉点。

上一篇：Javascript模块化编程（三）：require.js的用法
下一篇：js实现各种进制的转换