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 .

你可能感兴趣的:(svg动画和canvas动画简介)