Canvas学习笔记之动画

Canvas 学习笔记之动画 -- by Damon

动画的基本步骤

• 清空
• 保存状态
• 绘制图形（animated shapes）
• 恢复状态

操控动画

有安排的更新画布

• setInterval
• setTimeout
• requestAnimationFrame（cb）

动画太阳系

function draw() {

    ctx.clearRect(0, 0, 300, 300);

    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();

    // sun
    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);

    window.requestAnimationFrame(draw);
 }

注意坐标系的变化，首先将坐标系移到中心，然后保存当前状态。
绘制地球时，旋转、移动坐标系，然后绘制。
绘制月球时，坐标系不要变化，此时地球为参考系，实际上此时不用save一次，因为状态变化是叠加的。画完月球后restore一次，恢复到画地球之前的状态就可以了。
绘制太阳时，先确保恢复到绘制地球之前的状态。

Paste_Image.png

关于requestAnimationFrame

代码地址
Demo地址