canvas与svg

介绍

Canvas：

• Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
  没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。

SVG：

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

区别

Canvas

1. Canvas 是通过 JavaScript 来绘制 2D 图形。
2. Canvas 是逐像素进行渲染的。
3. 在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。
4. 依赖分辨率。
5. 不支持事件处理器。
6. 文本渲染力弱。
7. 能够以 .png 或 .jpg 的格式保存结果图形。
8. 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘。
9. 在功能上，Canvas 可以看做是一个画布，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。
10. 从操作上，我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。

SVG

1. SVG 用来定义用于网络的基于矢量的图形。
2. SVG 使用 XML 格式定义图形。
3. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
4. SVG 是万维网联盟的标准。
5. 不依赖分辨率。
6. 支持事件处理器。
7. 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）。
8. 不适合游戏的应用。
9. 复杂度高会减慢渲染的速度。
10. 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者直接在html文件中引入SVG标签。
11. 从功能上，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，所以就很适合来做地图。
12. 从操作上，svg支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用 ，这里我们不能用属性 style="width:XXX;height:XXX;"来定义 。