HTML 中使用 Canvas 2d 让静态图片动起来

最新推荐文章于 2025-03-25 14:58:45 发布

墨城之左

最新推荐文章于 2025-03-25 14:58:45 发布

阅读量1.2k

点赞数 1

分类专栏：技术杂文文章标签：前端 javascript

本文链接：https://blog.csdn.net/antony1776/article/details/125406098

版权

技术杂文专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一段使用JavaScript实现的动态代码，通过数组存储图片路径，并利用Set缓存图片内容，创建了一个500x500像素的canvas，实现每3秒切换显示150张图片的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="background-color: black;">
    <!-- 图片显示区域 -->
    <canvas id="canvas" style="border:1px dashed gray;" width=500 height=500></canvas>
    <script>
        let imageList = []; // 图片路径数组
        for(let i = 0; i < 150; i++){
            let index = i + "";
            imageList.push({url: `./earth/\u5408\u6210%202_00${index.padStart(3, "0")}.png`});
        }

        let imagesMap = new Map(); // 用户缓存获取的图片内容
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        //  绘制图片
        imageList.forEach((img, i) => {
            let newImage = new Image();
            newImage.src = img.url; 
            newImage.onload = () => {
                imagesMap.set(i, newImage); // 将图片缓存下来！
            }
        })

        let i = 0;
        function render(){
            let image = imagesMap.get(i%150);
            if (image){
                if (i%3==0){
                    context.clearRect(0,0,500,500);  
                    context.drawImage(image, 0, 0, 500, 500);
                }
                
                i++;
            }

            requestAnimationFrame(render); // 刷新
        }

        render();
    </script>
</body>
 
</html>