4

次のコードを使用して、アニメーションとして使用する一連の画像を事前にレンダリングしています。

var renderToCanvas = function (width, height, renderFunction) {
var buffer = document.createElement('canvas');
buffer.width = width;
buffer.height = height;
renderFunction(buffer.getContext('2d'));
return buffer;
};  


function prerender(){

frames = [];        
for(i=0; i<20; i++)
{
frames[i] = renderToCanvas(200, 60, function (seq) {
var image = new Image();
image.onload = function(){
seq.drawImage(image,0, 0, 200,60);
};
    image.src = "animation/animation0" + i + ".png";
});
}
}

これにより、シーケンスごとに 20 のオフステージ キャンバスが作成されます。それで：

context.drawImage(frames[count], 13, 80, 200, 60);

この場合、事前レンダリングはパフォーマンスを向上させますか? 次のようにアニメーションを実行することもできます。

var disc= new Image();
disc.onload = function(){
context.clearRect ( 7, 235 , 200, 60 );
context.drawImage(disc, 7, 235, 200, 60); 
  };  
disc.src = "animation/animation00" + count + ".png";

（未完成の）アプリへのリンクは次のとおりです。

http://tadjaland.com/spinningDisk/Yokogawa%20Spinning%20Disc-v0.html

(スライダーを有効にするには、Yahoo と IE を更新する必要があるかもしれませんが、この問題はまだわかりません)

また、標本ボックスをクリックするたびに、さらに 20 の新しいオフステージ キャンバスが作成されます。

2 つ目の質問は、事前レンダリングによってパフォーマンスが向上する場合、すべての画像を 1 つのオフスクリーン キャンバス (スプライト シートなど) に事前レンダリングする方がよいでしょうか、それともキャンバスの数が問題になるのでしょうか?

4

0 に答える 0