选择图像接口

所以当你需要在浏览器中绘图时，你都可以选择纯粹的 HTML、SVG 或画布。没有唯一的最适合的且在所有动画中都是最好的方法。每个选择都有它的利与弊。

单纯的 HTML 的优点是简单。它也可以很好地与文字集成使用。SVG 与画布都可以允许你绘制文字，但是它们不会只通过一行代码来帮助你放置text或者包装它，在一个基于 HTML 的图像中，包含文本块更加简单。

SVG 可以被用来制造可以任意缩放而仍然清晰的图像。与 HTML 相反，它实际上是为绘图而设计的，因此更适合于此目的。

SVG 与 HTML 都会构建一个新的数据结构（DOM），它表示你的图片。这使得在绘制元素之后对其进行修改更为可能。如果你需要重复的修改在一张大图片中的一小部分，来对用户的动作进行响应或者作为动画的一部分时，在画布里做这件事情将会极其的昂贵。DOM 也可以允许我们在图片上的每一个元素（甚至在 SVG 画出的图形上）注册鼠标事件的处理器。在画布里则实现不了。

但是画布的基于像素的方法在需要绘制大量的微小元素时会有优势。它不会构建新的数据结构而是仅仅重复的在同一个像素上绘制，这使得画布在每个图形上拥有更低的消耗。

有一些效果，像在逐像素的渲染一个场景（比如，使用光线追踪）或者使用 javaScript 对一张图片进行后加工（虚化或者扭曲），只能通过基于像素的技术来进行真实的处理。在某些情况下，你可能想要将这些技术整合起来使用。比如，你可能用 SVG 或者画布画出一个图形，但是通过将一个 HTML 元素放在图片的顶端来展示像素信息。

对于一些要求低的程序来说，选择哪个接口并没有什么太大的区别。因为不需要绘制文字，处理鼠标交互或者处理大量的元素。我们在本章为游戏构建的显示屏，可以通过使用三种图像技术中的任意一种来实现。