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

Question

我正在尝试在这个伟大的脚本之上构建 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
          }

我试过在结束正文标签之前添加这个:

                 window.onload = draw; 

但是，我相信必须在 draw() 函数中更改代码。在 setInterval 函数的某个地方？

Answer 1

这是您的 draw 的修改版本在将它们放在 Canvas 上之前预加载所有图像的功能。

它假设您有一个 id 为“anim”的 Canvas (因为您提供的源代码中没有 Canvas 的引用)

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