html5 使用canvas 显示动画（图片）序列帧

最新推荐文章于 2023-02-23 15:54:18 发布

HH_KELE

最新推荐文章于 2023-02-23 15:54:18 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/HH_KELE/article/details/104368670

版权

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>canvas导入序列帧</title>
</head>
<body>
<canvas id="animation_canvas" width="640" height="1030" style="background-color: #fff;"></canvas>
</body>
<script>
    //初始化参数
    var canvas = null;
    var ctx = null;
    //预加载序列图片
    function loadImages(sources,callback){
        var loadedImages = 0;
        var numImages = 0;
        var images=[];
        var clearWidth=canvas.width;
        var clearHeight=canvas.height;
        // get num of sources
        numImages=sources.length;
        for (var i=0,len=sources.length;i<len;i++) {
            images[i] = new Image();
            //当一张图片加载完成时执行
            images[i].onload = function(){
                //当所有图片加载完成时，执行回调函数callback
                if (++loadedImages >= numImages) {
                    callback(images);
                }
            };
            //把sources中的图片信息导入images数组
            images[i].src = sources[i];
//            console.log(images);
        }
    }
    //播放图片动画
    function playImages(images){
        var imageNum=images.length;
        var imageNow=0;
        setInterval(function(){
//      ctx.fillStyle="rgba(0,0,0,0)";
            ctx.clearRect(0,0,640,1030);
            ctx.fillRect(0, 0, 640, 1030);
            ctx.drawImage(images[imageNow], 0, 0, 640, 1030);
            imageNow++;
            if(imageNow>=imageNum){
                imageNow=89;
            }
        },100)
    }
    //初始化
    window.onload = function(){
        var sources = [];
        //构建图片序列数据
        for(var i=0;i<=146;i++){
            sources[i] = 'images/0/01_' + i + '.png';//根据项目修改
        }
        canvas = document.getElementById("animation_canvas");
        canvas.width = 640;
        canvas.height = 1030;

        ctx = canvas.getContext("2d");
        //ctx.globalAlpha=0.5
        //执行图片预加载，加载完成后执行main
        loadImages(sources,function(images){
            playImages(images)
        });
    };

</script>

</html>

HH_KELE

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html5 使用canvas 显示动画（图片）序列帧

<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <title>canvas导入序列帧</title></head><body><canvas id="animation_canvas" ...
复制链接

扫一扫