Холст drawImage медленный на большом источнике

Question

Я делаю игру и создаю камеру, чтобы следить за игроком. У меня большой холст (карта игры) 4096x4096px. Для этого я хотел бы сделать только часть этого с:

ctx.drawImage(canvas, 0, 0, 800, 600, 0, 0, 4096, 4096); 

Перед каждым кадром я буду называть:

ctx.clearRect(0, 0, 800, 600); 

Чтобы только очистить камеру. Я вижу, что drawImage очень медленный, производительность мудрая. Является ли моя игровая карта большой и что не обрабатывается drawImage? Как создать плавный рендеринг?

Answer 1

Я думаю, что вы можете не понимать некоторые аргументы drawImage.

Как вы написали drawImage, он будет обрезать 800x600 от источника. Затем он увеличит его до 4096x4096. И это, наконец, нарисует этот 4096x4096 на холсте.

Итак, у вас есть спрайт 4096x4096. Вы хотите скопировать часть 800x600 из этого спрайта и нарисовать эту обрезку на холст:

// this will clip 800x600px from your source image 
// starting at top-left == [1600,0] 
// and it will paint that clipping at [0,0] on the canvas 
// while not changing the clipping size from its original 800x600 

ctx.drawImage(
    yourImage  // use yourImage as the source image 
    1600,0   // clip from the source image with top-left at [1600,0] 
    800,600   // clip 800x600px from the source 
    0,0    // paint the clipping at [0,0] on the canvas 
    800,600   // use the same 800x600 size that was clipped 
); 

Answer 2

Нам нужно будет увидеть больше кода, чтобы действительно знать, где проблемы с производительностью.

Скорее всего, это размер, который замедляет вас. drawImage()easily the fastest method для обновления холста, но есть и другие вещи, которые могут замедлить вас, например, использование getImageData() или неэффективный Javascript.