写在前面：
svg，canvas无疑是当下前端同学的必备技术，比如自己实现一个复杂的组件，就会使用svg和canvas。另外，当下比较流行的WebGL最终都会渲染在canvas标签中，所以有必要了解一下svg和canvas的区别，下面列了一张表格
| 属性 | canvas | svg |
|---|---|---|
| 图形类型 | 位图 | 矢量图 |
| 绘制图形 | 纯脚本（js） | 使用xml格式（xml格式是对html的补充） |
| 使用方法 | 通过ctx = domElement.getContext(“2d”)来获得操作句柄，然后使用ctx.fillRect (30, 30, 55, 50)等一系列操作来画图 | 和html类似，直接使用
|
| 绑定事件 | 发生点击事件的时候，检查事件对象的位置，然后检查哪些图形覆盖了该位置（这个位置上有多个对象的时候，可能还需要增加一下Canvas内部的捕获和冒泡机制） | 由于svg绘制出来的图形元素最终都是DOM节点，所以绑定事件是十分容易的 |
| 缩放比较 | canvas由于是位图，在放大的时候，就会像图片一样，失真，出现马赛克的情况 | svg是矢量图形，可以自由缩放，不会失真和锯齿 |
