HTML5 Canvas动画效果实现原理

左手的ㄟ右手 2022-08-13 11:58 265阅读 0赞

[![328298e5-6460-4029-a277-1cd702a54b46.jpg][]][328298e5-6460-4029-a277-1cd702a54b46.jpg 1]

[在线演示][Link 1]

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：

> 每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

首先是绘制图形的方法，如下：

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

下面是实际绘制图形方法：

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]  
>

原文来自：[HTML5 Canvas动画效果实现原理 ][HTML5_Canvas_]

[328298e5-6460-4029-a277-1cd702a54b46.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/328298e5-6460-4029-a277-1cd702a54b46.jpg
[328298e5-6460-4029-a277-1cd702a54b46.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/328298e5-6460-4029-a277-1cd702a54b46.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/4012/empty/3b172577-5c08-4704-8bfc-2e18116dc341.html.htm
[HTML5]: http://www.gbtags.com/gb/gbliblist/8.htm
[HTML5_Canvas_]: http://www.gbtags.com/gb/share/4012.htm