| canvas | svg |
|---|---|
| 通过javascript来绘制2D图形 | 使用XML描述2D图形的 |
| 位图 | 矢量图 |
| 可以使用.jpg和.png格式图片 | 使用现有的图片作为 |
| 不支持事件处理器 (addHitRegion这个api兼容性暂时不够) | 可以为某个元素添加事件(把元素当成dom使用) |
| 不能够改变大小,只能缩放显示 | 能够很好的处理图形大小的改变 |
| 用户交互到像素点(x, y) | 用户交互到图形元素(rect, path) |
| 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
| Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制 | |
| webkitBackingStorePixelRatio会影响图片和成的模糊程度 |
webGL是canvas+openGL,功能是可以做3D展示。