Удастся ли ускорить рисование на полпикселя в HTML5 canvas?

Question

Я рисую спрайт (шарика) на элементе canvas. Однако, когда шар движется, положение мяча по x или y может стать дробным, например. (20,153; 63,638). Когда холст используется для рисования этого изображения, он пытается использовать прозрачные пиксели, чтобы шар появился более точно.

Мне было интересно, стоит ли мне использовать Math.round() перед тем, как рисовать мяч, чтобы избежать прозрачных пикселей и, возможно, значительно ускорить игру. Это сильно поможет? Игра представляет собой сложную игру понг.

Изображение ниже должно помочь с моим объяснением:

Answer 1

По крайней мере этот парень, похоже, так и считает . Как упомянул Гейб, это зависит от реализации.

Обратите внимание, что какое-то сглаживание, похоже, срабатывает, если вы используете обычные координаты (1, 14 и т. Д.). По этой причине некоторые руководства (в основном Dive Into HTML5 ), по-видимому, говорят о том, что вам лучше, если вы будете разгибать, используя половину пикселей (то есть 1,5, 14,5 и т. Д.). Я не знаю, имеет ли это какое-то значение для производительности, хотя. Это заметно по результату рендеринга как минимум.

Вы также можете поэкспериментировать с различными схемами наложения. См. этот вопрос для получения дополнительной информации. В зависимости от вашей ситуации вы можете рассматривать ваши объекты как отдельные холсты и просто смещать их поверх фона.

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