HTML5 Game Dev - Масштабирование HTML + Холст

Question

Я разрабатываю игру как в CSS, так и в Canvas. Пользовательский интерфейс разрабатывается в CSS, поскольку он значительно ускоряет работу.

Я бы хотел (а) создать для: 1366x768 или 1920x1080.

---

холст кажется легко масштабируется, как, видимо, все, что требуется, (простой пример):

HTML

<canvas width=1366 height=768> 

CSS

canvas{ width:100%; height:100%; } 

Но как бы я идти на о масштабировании всей страницы вверх и вниз? CSS содержит текстуры и другие активы, которые я хотел бы масштабировать с помощью холста.

---

Решение я нашел до сих пор:

CSS

-webkit-transform: scale(resolutionRatio, resolutionRatio) 

где resolutionRatio = newResolution/1366

Но я не полностью доверяю это, как я уверен, что это не то же, что и width: 100%, и понятия не имеет, если он ведет себя так же, как масштабирование холста.

---

Вы порекомендовали бы что-нибудь в частности? Неужели я полностью учусь?

Надеюсь, кто-то может помочь. Благодаря! :)

Answer 1

Вы уже используете ширину и высоту 100% на холсте, чтобы оно и все в нем были масштабированы с помощью страницы (и, к сожалению, также дают меньше качества и производительности).

Лучший способ масштабирования, так как холст не берут% -значения себя, чтобы рассчитать фактическую ширину и высоту в пикселях (и удалить любое масштабирование CSS):

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

Это вы можете позвонить на событие resize и функция перерисовки готовы, если это произойдет, чтобы перерисовать все в масштабе. Немного больше работы, но гораздо лучший результат (и производительность).

Если вы дополнительно установили холст как position: fixed, вы также получите небольшое повышение по обновлению страницы.