小编以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1) canvas元素结合JS

(2) 纯粹的CSS3动画(暂不被所有主流浏览器支持，比如IE)

(3) CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

1.canvas

html代码：

复制代码代码如下:

Animation in HTML5 using the canvas element

Your browser does not support the -element.Please think about updating your brower!

js代码：

定义一些变量：

复制代码代码如下:

var dx=5, //当前速率

rate=1, //当前播放速度

ani, //当前动画循环

c, //画图(Canvas Context)

w, //汽车[隐藏的](Canvas Context)

grassHeight=130, //背景高度

carAlpha=0, //轮胎的旋转角度

carX=-400, //x轴方向上汽车的位置(将被改变)

carY=300, //y轴方向上汽车的位置(将保持为常量)

carWidth=400, //汽车的宽度

carHeight=130, //汽车的高度

tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离

axisDelta=20, //汽车底部底盘的轴与轮胎的距离

radius=60; //轮胎的半径

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

复制代码代码如下:

(function(){

var car=document.createElement('canvas'); //创建元素

car.height=carHeight+axisDelta+radius; //设置高度

car.width=carWidth; //设置宽度

w=car.getContext('2d');

})();

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

复制代码代码如下:

function play(s){ //参数s是一个button

if(ani){ //如果ani不为null，则代表我们当前已经有了一个动画

clearInterval(ani); //所以我们需要清除它(停止动画)

ani=null;

s.innerHTML='Play'; //重命名该按钮为“播放”

}else{

ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一

s.innerHTML='Pause'; //重命名该按钮为“暂停”

}

}

加速，减速，通过以下方法，改变移动距离的大小来实现：

复制代码代码如下:

function speed(delta){

var newRate=Math.max(rate+delta,0.1);

dx=newRate/rate*dx;

rate=newRate;

}

页面加载的初始化方法：

//init

function init(){

c=document.getElementById('canvas').getContext('2d');

drawCanvas();

}

主调方法：

复制代码代码如下:

function drawCanvas(){

c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显示的)，避免产生错误

c.save(); //保存当前坐标值以及状态，对应的类似“push”操作

drawGrass(); //画背景

c.translate(carX,0); //移动起点坐标

drawCar(); //画汽车(隐藏的canvas)

c.drawImage(w.canvas,0,carY); //画最终显示的汽车

c.restore(); //恢复Canvas的状态，对应的是类似“pop”操作

carX+=dx; //重置汽车在X轴方向的位置，以模拟向前走

carAlpha+=dx/radius; //按比例增加轮胎角度

if(carX>c.canvas.width){ //设置某些定期的边界条件

carX=-carWidth-10; //也可以将速度反向为dx*=-1;

}

}

画背景：

复制代码代码如下:

function drawGrass(){

//创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标

var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);

//为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色

grad.addColorStop(0,'#33CC00');

grad.addColorStop(1,'#66FF22');

c.fillStyle=grad;

c.lineWidth=0;

c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);

}

画车身：

复制代码代码如下: