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

我试图在这个伟大的脚本here的基础上构建，并由Phrogz解答。在动画之前改进HTML5画布逐帧JPG动画以完全缓存

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

我试图做到这一点是我试图提供一个替代解决方案来获取动画自动播放，因为该功能在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函数中的某处？

来源

2012-12-16 Paul

你想先加载所有121张图片，然后开始动画吗？ – pimvdb

当您有121个jpeg帧的动画时，您应该使用'

@ Philipp是的，但是，关键是要让这个动画在iOS中自动播放。否则，我只会使用

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

假定您对ID为“动画”画布（如存在时所提供的源没有画布的参考）

<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-19 13:56:48 lostsource

你解决了！我试图解决这个很长一段时间。经过测试并在Safari和Chrome上使用iPad。谢谢！ – Paul

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

但是你试图做的事听起来就像你想创建一个视频剪辑。当您的意图是，<video>标记可能是更好的解决方案。用现代编解码器编码的121帧视频剪辑将比121个独立的JPEG小得多，因为视频压缩算法使用帧之间的冗余来提高压缩率。

来源

2012-12-16 19:24:54 Philipp

我将121张图像压缩到比MP4稍大的位置。 MP4为2.2 MB，121张图像为2.8 MB。所以，大小不是问题。我知道这会产生121个HTTP请求，但是我会以这种方式缓存它，只需要一次。一旦它被缓存，动画就可以正常工作。即使在iPhone 4s上。 – Paul

我试过在这里合并代码：http://stackoverflow.com/questions/7394136/how-to-optimize-animation-on-canvas-html-5我想你说的会解决这个问题，但没有已成功。你有代码示例吗？ – Paul

做**你有一个代码示例？ – Philipp

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

回答

相关问题