HTML5的Canvas和SVG标签理解

Canvas标签
Canvas元素是一个在网页上描绘图形的。但是canvas元素是通过javascript在网页上描绘图形的。也可以说它是一个画布，canvas是一个矩形的区域，在这里可以通过javascript来控制其中每一个像素。
在HTML页面里面添加了这个标签之后一般会在标签里面添加一个ID，然后在javascript里面通过ID来识别位置，因为ID是唯一性的。值得注意的是canvas元素本身是没有绘图能力的。所有的绘图效果必须在javascript内部完成，也就是说要通过javascript的代码来进行绘图操作。
在使用canvas标签的过程中可以在里面通过getContext()方法创建一个context对象，这个对象拥有多种方法比如绘制路径、矩形、圆形、字符以及添加图像的方法。
通过canvas标签实现的效果如下图：

SVG标签
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。

SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

另外SVG是可以直接嵌入 HTML 页面里面的。
Canvas和SVG的比较
Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  SVG
• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

Canvas 通过 JavaScript 来绘制 2D 图形，SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。