Question

我正在努力建立在这个由Phrogz回答的伟大剧本here之上。

问题是在所有图像都在浏览器中缓存之前，动画才会播放。因此，在第一次加载时它将无法播放。只有重装。

我尝试这样做的重点是我正在尝试提供另一种解决方案来让动画自动播放，因为该功能在iOS浏览器中不起作用。

以下是我正在使用的代码：

         function draw() { 
            var imgNumber = 1;
            var lastImgNumber = 121;

            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
            ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
            ctx.drawImage( img, 0, 0 );
            };
            var timer = setInterval( function(){
              if (imgNumber>lastImgNumber){
                clearInterval( timer );
              }
             else{
                img.src = "jpg_80/t5_"+( imgNumber++ )+".jpg";
              }
            }, 1000/24 ); //Draw at 24 frames per second
          }

我尝试在关闭正文标记之前添加它：

                 window.onload = draw;

但是，我认为必须在draw（）函数中更改代码。 setInterval函数中的某个地方？

Answer 1

这是draw函数的修改版本，它会在将所有图像放到画布上之前预先加载它们。

它假设你有一个id为'anim'的画布（因为你提供的源代码中没有画布的引用）

<canvas id='anim' width='660' height='500'></canvas>

JavaScript :(在iPad上测试）

function draw() {
    var ctx = document.getElementById('anim').getContext("2d");
    var start = 1, stop = 121,cur=start,imgArr=[];

    var loadLoop = function() {
        var img = document.createElement("img");
        img.onload = function() {
            imgArr.push(this);
            cur++;

            if(cur > stop) {
                // all images preloaded
                animate();
            }
            else {
                loadLoop();
            }
        }

        img.src = "jpg_80/t5_"+(cur)+".jpg";
    }

    loadLoop();

    function animate() {
        var timer = setInterval(function() {
            ctx.drawImage(imgArr.shift(), 0, 0 );
            if(imgArr.length == 0) {
                // no more frames
                clearInterval(timer);
            }
        },1000/24);
    }
}

Answer 2

您可以创建121个<img>元素，并为每个元素添加.onload个功能。在该处理程序中，您可以递增一个数字，当它达到121时，您将启动动画。

但是你想要做的事情听起来像你想创建一个视频剪辑。如果这是您的意图，<video>标签可能是更好的解决方案。使用现代编解码器编码的121帧视频剪辑将比121个单独的JPEG小得多，因为视频压缩算法使用帧之间的冗余来改善压缩。

逐帧改进HTML5 Canvas JPG动画在动画制作之前完全缓存

2 个答案: