2016-01-13 3 views
2

Я заметил, что элемент <canvas> может иметь разные масштабы. Например, если я устанавливаю ширину и высоту CSS 100px, но javascript устанавливает ширину и высоту элемента 200px, размер элемента уменьшается, поэтому все напечатанное на нем значение равно 1/2. (Или 2x разрешение)Как определить разрешение экрана компьютера в javascript?

У меня есть сетчатый экран Macbookpro, поэтому в разработке я устанавливаю масштаб на 2x, чтобы изображения и объекты выглядели ясными и четкими на моем экране.

Я слышал, что другие экраны могут иметь разрешение 1.2x (CSS пиксели против фактических пикселей)

Есть ли способ, чтобы выяснить, что разрешение/масштабирование экрана устройства, так что я могу сделать свой холст насколько хрустящим и максимально чистым для пользователя?

Если это вообще помогает, я пытаюсь создать игру в javascript, используя холст в качестве графического вывода.

ответ

2

Эти свойства будут давать свои размеры:

window.screen.availHeight

window.screen.availWidth

Для глубины пикселя, использовать это свойство:

window.devicePixelRatio

Для применения в полотне, полезный скрипт и дается пояснение here.

+0

Так что это дает мне размеры доступного рабочего пространства в пределах экрана. Но разве это говорит мне, нужно ли удвоить разрешение холста? –

+0

Основываясь на этом http://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript availHeight скажет только, как может получиться большое окно браузера, и вычитает неиспользуемый экран пространство. Это может быть или не быть желательным. –

+0

Возможно, я неправильно сформулировал свой вопрос. screen.availHeight и screen.availWidth - это не то, что я ищу. Я хочу знать: «Должен ли я сделать ширину и высоту своего холста в два раза больше, чем он установлен в CSS? Или я должен оставить разрешение от 1 до 1?». При работе с полосками на экране сетчатки они выглядят размытыми. Я хочу знать разрешение экрана, чтобы я мог сделать мои полотна не размытыми на любом экране. –

0

После поиска с использованием разных терминов я смог найти ответ, который я искал.

Объект имеет window.devicePixelRatio. Это позволяет нам узнать отношение пикселей к пикселам экрана устройства. На моем экране сетчатки эта переменная дает мне 2. При этом я могу установить холст на правильное масштабирование, чтобы он выглядел чистым и четким на любом экране.

Источник: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Смежные вопросы