Question

html5动画和html画布的区别

Answer 1

题主所指的html动画中是可以通过css和js两大类来绘制动画的。
而html画布分为为svg和canvas两大类。
假设html5动画为第一类动画，html画布为第二类动画。
第一类：css3可以很便捷的实现一些动画效果，并且在支持css3的浏览器下表现不错，用js做动画的话，除非是在非常古老的浏览器(你懂的)下运行，一般也不会有卡顿问题,不过还是建议在支持css3的浏览器下使用css3去做动画。移动端的话，其实能用的效果真的不多，以前做过一个折叠效果，在安卓下完全不堪入目，IOS下也是勉强看到折了那么一下，但是pc上看就很顺畅，一般的滑动效果还是没有问题的，而且相当顺畅。 总结下，工作中如果要兼容那些老古董的话，还是用js去写动画，如果只需要兼容现代浏览器的，尽量使用css3做动画，移动端就完全不要考虑js写动画了。
第二类：
Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。
从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
总结来说，第二类canvas的本质也是js，在现代浏览器能用css的尽量去用css吧。