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
