1

我正在尝试在这个由 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 函数的某个地方？

4

2 回答 2

3

这是您的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);
    }
}
于 2013-01-19T13:56:48.650 回答
0

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

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

于 2012-12-16T19:24:54.003 回答