svg动画和canvas动画简介

svg动画

1 .使用XML文档来描述来绘图，更加适合做动态交互，编辑很容易，只需要增加或者移除相应的元素就可以了
2 .基于矢量，可以很好的处理图形大小的改变,canvas只能缩放显示
3 .支持脚本和css
4 .适合大面积，小数据量
5 .擅长交互
6 .pc端，强交互，少元素
7 .高保真复杂载体文件
8 .静态的web图像

canvas

1 .像素处理，动态渲染，大数据量绘制
2 .像素，只能脚本驱动
3 .适合小面积，大数据量
4 .不负责帮你检测鼠标触摸事件发生在哪一个元素上面。但是echarts如果用canvas显示出来，也是可以基于图形检测鼠标的事件的--在canvas上建立了一层mvc层，可以像svg一样操作和交互性。所以要比svg好一点，可以绘制数万个点
5 .pc端，弱交互，强性能
6 .pc超强性能 webgl-canvas
7 .依赖分辨率
8 .能够以.png或者.jpg的格式保存结果图像
9 .适合密集型的游戏，许多对象倍频繁重绘
10 .高性能图形，实时数据
11 .

总结

1 .随着屏幕尺寸的变大，canvas开始降级
2 .随着屏幕上对象数量的增加，svg开始降级
3 .其实可以看下echarts分别使用svg，canvas渲染的时候的性能差距
4 .