Question

我使用以下代码预渲染一系列图像以用作动画：

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多个新的场外画布，这似乎会导致问题。

我的第二个问题是：如果预渲染会提高性能，那么将所有图像预渲染到一个离屏画布上（如精灵表）或画布数量是否重要会更好吗？ / p>

带有多个屏幕外画布的HTML5会影响性能吗？

0 个答案: