几种制作页面动画的总结

往昔流行的页面flash动画，已经逐渐被日益强大的CSS，Canvas和Js动画取代，多种多样的动画实现API，可能会给前端开发带来一些选择恐惧症，尤其对于新人，所以这里总结一下几种动画的使用，方便日后选择使用，提示：本文不是细致的API使用介绍，是对于几种动画开发API的使用场景的总结。

一、Canvas

首当其冲的，当然是H5的canvas了，当然它虽然是H5的标签，但是具体的实现，完全要靠Js，所以利用Canvas绘图制作动画，需要一定的原生Js功底。

简述：Canvas绘图，少不了以下代码：

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

获取页面Canvas画布DOM，然后建立2d上下文，可以说之后所有的fillStyle; fillRect,甚至于moveTo等操作，全都是建立在2d上下文中的，每个画布左上角为（0,0）坐标，右下角为（width,height）即画布设置的宽高数值坐标，所有动画点位都是基于这些坐标和对应API绘制的；当然，如果觉得自己画麻烦，可以制作帧图，利用drawImage(img,x,y)读取图片，配合requestAnimationFrame动画API就可以完成一个动态显示了。

场景：一般游戏场景用Canvas比较多；如果绘画能力很强的，也可以用这个绘制比较炫酷的动画&