HTML5用canvas怎么实现动画效果

Posted 2023-04-27

使用html5画布canvas能够快速实现简单的动画效果，基本原理如下：

每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用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);

以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

参考技术A 素材准备，基本框架的建立。
这里我们让一个有字的图片从左到右运动起来。
1.素材：图片一张。
2.框架的建立（如下图）

3.将图片素材引入网页。
4.定义canvas标签，获取canvas的上下文。
5.定义一个画图片的函数，使用canavs绘图API里面的drawImage来完成。

6.写一个更新的函数，因为我们要让他动起来，所以每时刻绘制的地方都不一样。注意：这儿要用clearRect，这个函数，主要是为了清空画布。

7.写定时函数，每隔0.2秒就更新一次，重新绘制。

我们来看看最终的效果和所有代码吧！

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动画效果实现原理