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个新的台下画布，这似乎会引起问题。

我的第二个问题是：如果预渲染可以提高性能，将所有图像预渲染到一个屏幕外画布上会更好，比如精灵表，还是画布的数量很重要？

4

0 回答 0