HTML5 Canvas動畫效果實現原理

在線演示

使用HTML5畫布能夠幫助我們快速實現簡單的動畫效果，基本原理如下：

每隔一定時間繪制圖形並且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來刷新需要繪制的圖形

首先是繪制圖形的方法，如下：

function myAnimation() {
    ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

    if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
        stepX = -stepX;
    }
    
    if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
        stepY = -stepY;
    }

    x_icon += stepX;
    y_icon += stepY;

    ctx.drawImage(anim_img, x_icon, y_icon);
}

以上方法每隔一定時間清除畫布內容，並且重新計算繪制圖形位置，一旦超過了畫布大小，則反轉坐標繪制圖形。

下面是實際繪制圖形方法：

function draw() {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
    anim_img = new Image(size_x, size_y);
    
    anim_img.onload = function() {
        setInterval('myAnimation()', 5);
    }
    
    anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
}

以上方法將圖形定義，並且調用實際繪制動畫的方法，搞定！

如果大家對於HTML5繪制動畫有興趣，或者希望了解如何模擬物理動畫效果，請閱讀下面的互動教程，相信能夠幫助你更好理解HTML畫布：

HTML5畫布實現的粒子運動效果

原文來自：HTML5 Canvas動畫效果實現原理