1

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
          }

bodyタグの終了前にこれを追加しようとしました：

                 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 に答える