Координаты масштабируемого элемента холста

Я уже использовал поисковую систему, но не получил нужной информации, поэтому хочу спросить, есть ли у кого-нибудь хороший метод/трюк для использования самодельной системы координат в элементе холста HTML5.

Я хочу разработать 2D-игру в HTML5 с использованием элемента canvas, который должен адаптироваться ко всему окну браузера, например:

<canvas style="width: 100%; height: 100%;">
     No support for your browser, unfortunately...
</canvas>

Проблема в том, что я не знаю, как мне управлять координатами моей игры. В моей игре игрок, например. сразу перемещается на 32 пикселя вправо, когда пользователь нажимает клавишу со стрелкой вправо, но что произойдет, если я изменю размер элемента холста? Логично, что «блоки» игры тоже изменят свой размер, так что единицей измерения координат больше не будут пиксели.

Есть ли другие единицы, которые я мог бы использовать, или что бы вы посоветовали мне сделать?


javascript canvas html coordinate-systems
person YoshiJaeger    schedule 15.02.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Установите атрибуты ширины и высоты холста в соответствии с размером игровой области.

<canvas id="mycanvas" width="400" height="300"/>

И установите его стиль на желаемый размер отображения на экране.

#mycanvas {
    width: 100%
    height: 100%
    display: block
}

Теперь вы всегда можете предположить в коде, что холст имеет размер 400x300, и при рисовании игнорировать фактический размер физического пикселя на экране.

Вам нужно масштабировать щелчки мыши, чтобы они соответствовали фактическому местоположению по игровым координатам. Таким образом, если вы щелкнете мышью по холсту в точке (x, y), вы получите координаты игры по x = ( x / $('#mycanvas').width()) * 400 и y аналогично. Если холст не является полноэкранным, используйте $('#mycanvas').offset(), чтобы получить дельту для координат щелчка.

person Teemu Ikonen    schedule 15.02.2012
comment
Это так логично.. Я сейчас чувствую себя глупо ;) Спасибо за вашу компетентную помощь !!! - person YoshiJaeger; 16.02.2012

arrow_upward
0
arrow_downward

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

То, что вы написали, не делает ваш холст шириной страницы, он делает его шириной 300 пикселей и высотой 150 пикселей (по умолчанию), а затем искажает его до ширины и высоты страницы.

Придерживайтесь атрибутов ширины и высоты, которые имеет Canvas, вместо использования CSS.

Если вы хотите сделать его размером со страницу, у вас есть другие варианты, например, поместить холст в div, а затем сделать canvas.width равным div.style.clientWidth.

Для работы с окнами разных (полноэкранных или нет) размеров см. мой ответ о «координатах модели» здесь: Работа с холстом на разных размерах экрана

person Simon Sarris    schedule 15.02.2012
comment
Верно почти для всех элементов HTML... но не для ‹canvas›. Обычно спецификации HTML и CSS пытаются сделать одно и то же, и указание обоих (особенно по-разному) приводит к беспорядку. НО с ‹canvas› ширина/высота HTML и ширина/высота CSS делают разные вещи, и часто вам нужны они оба. Это один из случаев, когда обобщение того, что обычно является передовой практикой CSS, не работает. - person Chuck Kollars; 29.10.2013