HTML5 с несколькими закадровыми полотнами влияет на производительность? - PullRequest
Новая
       4

HTML5 с несколькими закадровыми полотнами влияет на производительность?

4 голосов
/ 10 февраля 2012

Я использую следующий код для предварительного рендеринга серии изображений для использования в качестве анимации: 

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 новых внеплановых полотен. Похоже, это вызовет проблемы.

Мой второй вопрос: если предварительный рендеринг улучшит производительность, лучше ли будет предварительно рендерить все изображения на одном внеэкранном холсте, таком как спрайт-лист, или количество холстов имеет значение?

...