Canvas基本動畫-太陽系的動畫

動畫的基本步驟

一、清空canvas
除非接下來要畫的內容會徹底充滿canvas(例如背景圖)，不然你須要清空全部，最簡單的方法是使用clearRect方法
二、保存canvas狀態
若是你要改變一些會改變canvas狀態的設置（樣式，變形之類的），又要在每畫一幀之時都是原始狀態的話，你須要先保存一下
三、繪製動畫圖形
四、恢復canvas狀態
若是已經保存了canvas的狀態，能夠先恢復它，而後重繪下一幀。

下面是MDN網站關於Canvas基本的動畫章節中的一個例子。是一個相對比較綜合的例子，涉及到畫布不少基礎並經常使用的用法，包括canvas的如何使用圖片，座標原點的移動，畫布的旋轉，狀態的保存與恢復等。

<script>
var sun = new Image();
var moon = new Image();
var earth = new Image();

function init() {
    sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
    moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
    earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
    draw();
}

function draw() {
    var ctx = document.getElementById("canvas").getContext("2d");
    //在現有的畫布內容後面繪製新的圖形
    ctx.globalCompositeOperation = 'destination-over';
    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);

    /*地球*/
    var time = new Date();
    ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
    //地球的背面
    ctx.translate(105, 0); //以ctx.translate(150,150);爲基礎
    ctx.fillRect(0, -12, 50, 24);
    //地球
    ctx.drawImage(earth, -12, -12)

    /*moon*/
    ctx.save(); //ctx.save(); 與下面的最近的ctx.restore();也能夠不須要
    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);
    ctx.stroke();

    /*太陽*/
    ctx.drawImage(sun, 0, 0, 300, 300);

    window.requestAnimationFrame(draw);
}
init()
</script>

查看動畫效果