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

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 小得多，因为视频压缩算法使用帧之间的冗余来改进压缩。