教你如何在网页上用H5实现动画效果

最新推荐文章于 2025-07-07 19:48:32 发布

weixin_33734785

最新推荐文章于 2025-07-07 19:48:32 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签：游戏 python

原文链接：https://my.oschina.net/u/4046848/blog/3005187

本文介绍如何使用HTML5的Canvas元素结合JavaScript来实现GIF动画效果。通过加载包含帧的图片，并利用Canvas的drawImage方法，可以控制图片的每一帧显示，从而达到动画效果。文章提供了具体代码示例，展示了如何设置帧率和控制动画播放。

2019独角兽企业重金招聘Python工程师标准>>>

在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？

其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；在web开发中，要实现这样的gif图片，也有很多方法；在这给读者提供一个思路，就是利用html5 canvas实现动画效果。

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>canvas帧--实现动画</title>
    <style>
        *{padding:0;margin:0;}
        canvas{display:block;background:white}
</style>
</head>
<body>    
<canvas></canvas>
<script>
    var imgPic = new Image();
    imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';
    var canvas = document.querySelector('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext('2d');
              imgPic.onload = function () {
          drawImg()
       }
    var i = 0;
    var lastTime = new Date().getTime();
    var delatime;
    var timer = 0;
    function drawImg() {
        window.requestAnimationFrame(drawImg);
        var now = new Date().getTime();
        delatime = now - lastTime;
        lastTime = now;
        timer += delatime;
        if (timer > 200) {
            i++;
            if (i > 7) i = 0;
            timer = 0
        }
        console.log(delatime)
        ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
    }
</script>
</body>
</html>

以上方法实现的前提是，需要有一张已绘制帧的图片，有了图片才可进行帧的动画；利用该方法可以控制动画的播放、暂停以及帧率

转载于:https://my.oschina.net/u/4046848/blog/3005187