ios - 改进HTML5 Canvas逐帧JPG动画以在动画前完全缓存

我正在尝试在这个伟大的脚本here的基础上构建，该脚本已被Phrogz回答。

问题在于，直到所有图像都缓存在浏览器中后，动画才能播放。因此，在第一次加载时它不会播放。仅在重新加载时。

我要执行此操作的目的是，我正在尝试提供一种替代解决方案来使动画自动播放，因为该功能在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
          }

我尝试在结束body标记之前添加以下代码:

                 window.onload = draw;

但是，我认为必须在draw()函数中更改代码。 setInterval函数中的某处？

最佳答案

这是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);
    }
}