在animation之前改进HTML5 Canvas逐帧JPGanimation来完全caching

我试图在这个由Phrogz回答的伟大脚本的基础上构build。

问题是直到所有图像caching在浏览器中，animation才会播放。 因此，在第一次加载它不会玩。 只有在重新加载。

我试图做到这一点是我试图提供一个替代的解决scheme，让animation自动播放，因为该function不能在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

这是您的drawfunction的修改版本，它将所有图像预先加载到canvas上。

它假设你有一个id为'anim'的canvas（因为你提供的源代码中没有canvas的引用）

 <canvas id='anim' width='660' height='500'></canvas> 

JavaScript：（在iPad上testing）

 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

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

但是你想要做什么听起来像你想创build一个video剪辑。 当你的意图是， <video>标签可能是一个更好的解决scheme。 使用现代编解码器编码的121帧video剪辑将远小于121个独立的JPEG，因为video压缩algorithm使用帧之间的冗余来提高压缩率。