Canvas 動畫 - 簡單物件移動

此篇文章介紹簡單的 HTML5 動畫,透過 Canvs 物件與 JavaScript 全域函式 setInterval() 的技巧,可以輕易的達到以下的效果。


您的瀏覽器不支援 HTML5 動畫,請改用 Chrome 或 Firefox

圖中的原理相當簡單,首先配置一個<canvas> 如下:

<canvas id="pCanvas" width="600" height="380" style="background:#000000;">
        您的瀏覽器不支援 HTML5 動畫,請改用 Chrome Firefox
</canvas>

然後建立一個函式,於某個特定位置描繪移動的圓球。

function drawCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, 12, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    x += 6;
    if (x > 560) x = 10;
}

在這段程式碼中,首先除空畫面,然後調用 arc() 函式於 x、y 座標位置描繪圓形,接下來改變 x 座標,作為下次重新描繪的座標位置起點。最後調用全域函式 setInterval() ,每 32 函秒呼叫一次 drawCanvas ,重繪圓球位置,模擬動畫效果。 

setInterval(drawCanvas, 32);

瞭解上述的原理,搭配相關的數學運算,不需使用其它函式庫便能實作出各種入門動畫效果。

Canvas 動畫 - 簡單物件移動
Canvas 動畫 - 簡單物件向量移動
Canvas 動畫 - 描述三角函數 Sin(x) 圖形

沒有留言: