У меня следующая проблема, и я считаю, что, должно быть, я делаю что-то глупое, но я не могу ее найти. (Это в Firefox 8)
Я беру большой файл спрайта, создаю новый маленький холст, в котором будет храниться только одна плитка этого спрайта, а затем использую базовую перегрузку drawImage, чтобы нарисовать эту изолированную плитку сотнями. мест в моем "экранном" холсте.
Я делаю это вместо того, чтобы просто использовать последнюю перегрузку drawImage, которая занимает только часть большего файла спрайта. Избавившись от этого ограничения, в Chrome, к моему удивлению, прирост производительности составил около 10%. Однако в Firefox частота кадров падает с 300 до 17 кадров в секунду.
Итак, по сути, я вижу, что рисование «с изображения на холст» примерно в 20 раз быстрее, чем рисование «с холста на холст» в Firefox.
Это правильно? Я не нашел никакой информации по этому конкретному случаю, но именно это я вижу в своих тестах.
Кроме того, этот код я использую. Я делаю что-нибудь невероятно глупое?
function Test5() {
var imgSprite = $('imgSprite');
var tileCanvas = document.createElement("canvas");
tileCanvas.width = 64; tileCanvas.height = 31;
var tileCtx = tileCanvas.getContext("2d");
tileCtx.drawImage(imgSprite, 0, 0, 64, 31, 0, 0, 64, 31);
//--------------------------------------
var ctx = getContext('mainScreen');
ctx.fillStyle = '#fff';
time(function() { // time will run this function many times and time it
ctx.fillRect(0,0, 1200,900);
var x=0, y=0, row = 0;
for (var i=1; i < 1000; i++) {
ctx.drawImage(tileCanvas, x,y); // <-- this is the line I care about
// some simple code to calculate new x/y
}
}, 1000, "Test5", 'Drawing from an individual tile canvas, instead of a section of big sprite');
}
Если вместо
ctx.drawImage(tileCanvas, x,y);
Я делаю:
ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);
Это в 20 раз быстрее
Я что-то здесь упускаю?
РЕДАКТИРОВАТЬ: Спросив об этом, я сделал для себя небольшую страницу, чтобы протестировать несколько разных вещей на разных платформах и посмотреть, как лучше всего сделать что-то на каждой.
http://www.crystalgears.com/isoengine/jstests3-canvas.html
Мне жаль, что код ужасно уродлив, это был быстрый взлом, не предназначенный для того, чтобы его увидели другие или даже я через несколько дней.