Как увеличить производительность холста

Question

Я хочу масштабировать игру от 1 корабля до флота из 10 000 кораблей, если это возможно для миллионов кораблей.

Холст рисует все, что вы велите ему нарисовать, даже если это отрицательные координаты.Поэтому я рисую только игровые объекты, находящиеся в диапазоне отображения.

Я везде использовал ES5, который работает быстрее и более поддерживается.Вычисление масштабирования и вращения производится по событиям Camera, Mouse и KeyBoard (не может применяться только для ракет и лазерных лучей).

Но основное время используется этой частью кода, которая используется для каждого игрового объекта в диапазоне отображения(может быть тысячи игровых объектов или несколько):

`ctx.save()
ctx.translate(drawX, drawY);
ctx.rotate(alfa);
ctx.drawImage(images.image, -width/2, -height/2, width, height);
ctx.restore()`

Как я могу сделать это быстрее?

Что лучше всего сделать для повышения производительности?Теперь я думаю об удалении ctx.rotate(alfa) и повороте изображения на основе событий и использовании повернутого изображения и изменении размера этого изображения с текущим масштабом (только для объектов в диапазоне отображения).

Спасибо.

Answer 1

Вы, вероятно, столкнетесь с жесткими ограничениями, если попытаетесь визуализировать несколько тысяч, не говоря уже о миллионе, независимых вещей в одном только 2D-холсте.Возможно, вам лучше использовать WebGL, возможно, с библиотекой, подобной PixiJS .

Однако, если вы все еще планируете использовать canvas, пользователь Blindman67 дал несколько хороших советов относительно производительности вдругой вопрос .Короче говоря, в вашем случае избегайте использования save / restore и используйте вместо него setTransform и рисуйте изображения с размерами, кратными 2 (2, 4, 8, 16, 32 и т. Д.).