Рисунок холста и дисплей 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

Ответ 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() выдаст те же значения, которые вы видите.