080_html5 Canvas和SVG

1. Canvas和SVG都允许您在浏览器中创建图形, 但是它们在根本上是不同的。

2. SVG

2.1. SVG是一种使用XML描述2D图形的语言。

2.2. SVG基于XML, 这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。

2.3. 在SVG中, 每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化, 那么浏览器能够自动重现图形。

3. Canvas

3.1. Canvas通过JavaScript来绘制2D图形。

3.2. Canvas是逐像素进行渲染的。

3.3. 在Canvas中, 一旦图形被绘制完成, 它就不会继续得到浏览器的关注。如果其位置发生变化, 那么整个场景也需要重新绘制, 包括任何或许已被图形覆盖的对象。

4. Canvas与SVG的比较

4.1. Canvas

 4.1.1. 依赖分辨率。

 4.1.2. 不支持事件处理器。

 4.1.3. 弱的文本渲染能力。

 4.1.4. 能够以.png或.jpg格式保存结果图像。

 4.1.5. 最适合图像密集型的游戏, 其中的许多对象会被频繁重绘。

4.2. SVG

 4.2.1. 不依赖分辨率。

 4.2.2. 支持事件处理器。

 4.2.3. 最适合带有大型渲染区域的应用程序(比如谷歌地图)。

 4.2.4. 复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)。

 4.2.5. 不适合游戏应用。