简单动画的制作

概念：

 

在Canvas画布中制作动画相对来说比较简单，实际上就是一个不断擦除、重绘、擦除、重绘的过程，具体步骤如下：

（1）预先编写好用来会吐的函数，在该函数中用clearRect方法将画布整体或局部擦除。

（2）使用setInterval方法设置动画的间隔时间。

setInterval方法为HTML中的固有方法，该方法接受两个参数，第一个参数表示执行动画的函数，第二个参数表示为时间间隔，单位为毫秒。

在比较复杂的情况下，我们也可以在清楚与绘制动画的当中插入当前绘制状态的保存与恢复，变成擦除、保存绘制状态、进行绘制、恢复状态的过程。

 

应用：

 

var context;
var width,height;
var i ;
function draw(id){
var canvas=document.getElementById("id");
if(canvas==null)
return false;
scontext = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
i = 0;
setInterval(rotate,100);//十分之一秒
}
function rotate(){
context.clearRect(0,0,width,height);
context.fillStyle = 'red';
context.fillRect = (i,0,20,20);
i = i+20;
}