Рисунок холста и дисплей Retina: выполнимый?
Работа с программой phoneGap с использованием холста. Ловушка, с которой мы столкнулись, состоит в том, что холст ожидает конкретных размеров пикселей. Это прекрасно, за исключением того, что дисплей Retina iPhone 4 от CSS/Webkit POV по-прежнему имеет ширину 320 пикселей, хотя технически есть 640 фактических пикселей экрана.
В любом случае, чтобы разместить экран сетчатки, используя Canvas на Webkit, сохраняя при этом совместимость с дисплеями без сетчатки?
Ответы
Ответ 1
Я сидел с той же проблемой на прошлой неделе и обнаружил, как ее решить -
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
if (window.devicePixelRatio > 1) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
canvas.style.width = canvasWidth;
canvas.style.height = canvasHeight;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
Полный код на gist, демо на jsfiddle
Ответ 2
Существует выпадающий polyfill, который позаботится о большинстве основных операций рисования для вас и устранит неоднозначность между браузерами, которые обрабатывают это автоматически для вас (сафари), и другие, которые этого не делают.
https://github.com/jondavidjohn/hidpi-canvas-polyfill
Вы просто включаете его перед своим кодом рисования, и он должен давать вам приличную поддержку сетчатки автоматически.
Ответ 3
WebCode (http://www.webcodeapp.com) - это приложение для векторного рисования, которое генерирует для вас код холста JavaScript HTML5. Код совместим с Retina, вы можете проверить, как они это делают.
Ответ 4
EDIT: Только что заметил, что я разместил неправильную ссылку для демонстрации!
Разрешение сетчатки (или другого hdpi-дисплея), безусловно, возможно. Здесь есть рабочий пример:
http://spencer-evans.com/share/github/canvas-resizer/
Я также столкнулся с этим несколько раз. Принятый код ответа в основном правильный, но вы также можете использовать библиотечное решение. Я взломал один, чтобы обработать интеллектуальное изменение размера холста, чтобы сделать элемент более отзывчивым и более высоким (как показано в демонстрации).
https://github.com/swevans/canvas-resizer
Ответ 5
У TJ Holowaychuk очень хороший polyfill:
https://www.npmjs.com/package/autoscale-canvas
Ответ 6
Я не мог найти больше нигде в Интернете, предлагающих это, поэтому я понял это. Если у вас полноэкранный холст, и вы хотите, чтобы это было реальное количество пикселей, которое есть у устройства, просто удалите эту строку из своего HTML-кода:
<meta name='viewport' content='width=device-width' />
Не устанавливайте область просмотра вообще. Тогда вы просто делаете:
canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'
Это будет использовать полное разрешение экрана устройства.
Пиксель всегда будет пикселем.
Вам не нужно масштабировать.
И getImageData() выдаст те же значения, которые вы видите.