在canvas画布中制作动画相对来说很简单，实际上就是不断变化的坐标、擦除、重绘的过程
1、使用setInterval方法设置动画的间隔时间。
setInterval(code,millisec) setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。
2、用来绘图的函数
1）通过不断变换X和Y的坐标实现动画的效果。
2）在该函数中先用clearRect方法将画布整体或者局部擦除。
擦除图像clearRect方法：
context.clearRect(x,y,width,height);
x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>canvas绘制动画</title> <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="200" height="200"></canvas> </body></html>
var context;var i,j;var width,height;function draw(id){ var canvas = document.getElementById(id); context = canvas.getContext('2d'); width = canvas.width; height = canvas.height; context.fillStyle = 'green'; context.fillRect(0,0,width,height); setInterval(painting,100); i = 0; j = 0;}function painting(){ //例子一： //context.fillStyle = 'red'; //context.fillRect(i,i,10,10); //context.fillRect(i,200-j,10,10); //i++; //j++; //例子二： context.fillStyle = 'white'; context.clearRect(i,20,1,10); i++; }