Координаты масштабированного элемента canvas - PullRequest
Новая
       3

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

2 голосов
/ 16 февраля 2012

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

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

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

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

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

Ответы [ 2 ]

6 голосов
/ 16 февраля 2012

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

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

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

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

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

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

0 голосов
/ 16 февраля 2012

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

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

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

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

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

...