HTML5 Canvas動畫效果實現原理

tyygming 10年前發布 | 20K 次閱讀 canvas JavaScript HTML5


在線演示

使用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動畫效果實現原理

 本文由用戶 tyygming 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/11823f1