基本动画的步骤 basic animation steps
画一帧，你需要以下一些步骤：
清空 canvas除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用clearrect方法。如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
绘制动画图形（animated shapes）
这一步才是重绘动画帧。
恢复 canvas 状态如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。
操控动画 controlling an animation在 canvas 上绘制内容是用 canvas 提供的或者自定义的方法，而通常，我们仅仅在脚本执行结束后才能看见结果，比如说，在 for 循环里面做完成动画是不太可能的。我们需要一些可定时的执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过setinterval和settimeout方法来控制在设定的时间点上执行重绘。
setinterval(animateshape,500); settimeout(animateshape,500);
动画例子 1
这个例子里面，我会让一个小型的太阳系模拟系统动起来。
var sun = new image(); var moon = new image(); var earth = new image(); function init(){ sun.src = 'images/sun.png'; moon.src = 'images/moon.png'; earth.src = 'images/earth.png'; setinterval(draw,100); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0,0,300,300); // clear canvas ctx.fillstyle = 'rgba(0,0,0,0.4)'; ctx.strokestyle = 'rgba(0,153,255,0.4)'; ctx.save(); ctx.translate(150,150); // earth var time = new date(); ctx.rotate( ((2*math.pi)/60)*time.getseconds() + ((2*math.pi)/60000)*time.getmilliseconds() ); ctx.translate(105,0); ctx.fillrect(0,-12,50,24); // shadow ctx.drawimage(earth,-12,-12); // moon ctx.save(); ctx.rotate( ((2*math.pi)/6)*time.getseconds() + ((2*math.pi)/6000)*time.getmilliseconds() ); ctx.translate(0,28.5); ctx.drawimage(moon,-3.5,-3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150,150,105,0,math.pi*2,false); // earth orbit ctx.stroke(); ctx.drawimage(sun,0,0,300,300); }
动画例子 2
function init(){ clock(); setinterval(clock,1000); } function clock(){ var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0,0,150,150); ctx.translate(75,75); ctx.scale(0.4,0.4); ctx.rotate(-math.pi/2); ctx.strokestyle = "black"; ctx.fillstyle = "white"; ctx.linewidth = 8; ctx.linecap = "round"; // hour marks ctx.save(); for (var i=0;i<12;i++){ ctx.beginpath(); ctx.rotate(math.pi/6); ctx.moveto(100,0); ctx.lineto(120,0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i=0;i<60;i++){ if (i%5!=0) { ctx.beginpath(); ctx.moveto(117,0); ctx.lineto(120,0); ctx.stroke(); } ctx.rotate(math.pi/30); } ctx.restore(); var sec = now.getseconds(); var min = now.getminutes(); var hr = now.gethours(); hr = hr>=12 ? hr-12 : hr; ctx.fillstyle = "black"; // write hours ctx.save(); ctx.rotate( hr*(math.pi/6) + (math.pi/360)*min + (math.pi/21600)*sec ) ctx.linewidth = 14; ctx.beginpath(); ctx.moveto(-20,0); ctx.lineto(80,0); ctx.stroke(); ctx.restore(); // write minutes ctx.save(); ctx.rotate( (math.pi/30)*min + (math.pi/1800)*sec ) ctx.linewidth = 10; ctx.beginpath(); ctx.moveto(-28,0); ctx.lineto(112,0); ctx.stroke(); ctx.restore(); // write seconds ctx.save(); ctx.rotate(sec * math.pi/30); ctx.strokestyle = "#d40000"; ctx.fillstyle = "#d40000"; ctx.linewidth = 6; ctx.beginpath(); ctx.moveto(-30,0); ctx.lineto(83,0); ctx.stroke(); ctx.beginpath(); ctx.arc(0,0,10,0,math.pi*2,true); ctx.fill(); ctx.beginpath(); ctx.arc(95,0,10,0,math.pi*2,true); ctx.stroke(); ctx.fillstyle = "#555"; ctx.arc(0,0,3,0,math.pi*2,true); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.linewidth = 14; ctx.strokestyle = '#325fa2'; ctx.arc(0,0,142,0,math.pi*2,true); ctx.stroke(); ctx.restore(); }
以上就是canvas游戏开发学习之八：基本动画的内容。