逐帧改进HTML5 Canvas JPG动画在动画制作之前完全缓存 [英] Improve HTML5 Canvas frame by frame JPG animation to fully cache before animating

问题描述

我正在尝试在这个伟大的脚本之上构建这里由Phrogz回答。

I'm trying to build on top of this great script here which was answered by Phrogz.

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

The problem is that the animation won't play until all the images have cached in the browser. Therefore, on first load it won't play. Only on a reload.

我尝试这样做的一点是，我正在尝试提供另一种解决方案，让动画自动播放，因为该功能在iOS浏览器中不起作用。

The point of me trying to do this is I'm trying to provide an alternate solution to getting an animation to autoplay since that feature doesn't work in iOS browsers.

以下是我正在使用的代码：

Here is the code I'm using:

         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
          }

我在尝试之前添加了这个关闭正文标记：

I've tried adding this before the closing body tag:

                 window.onload = draw; 

但是，我认为必须在draw（）函数中更改代码。 setInterval函数中的某个地方？

However, I believe that the code would have to be changed within the draw() function. Somewhere in the setInterval function?

推荐答案

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

This is a modified version of your draw function which preloads all images before putting them on a canvas.

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

It assumes you have a canvas with id 'anim' (as there is no reference of the canvas in the source you provided)

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

JavaScript :(在iPad上测试）

JavaScript: (tested on an 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);
    }
}

这篇关于逐帧改进HTML5 Canvas JPG动画在动画制作之前完全缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！