Рисование холста и показ Retina: выполнимо?

Question

Работа с phoneGap реализует рисование с помощью Canvas. Уловка, с которой мы столкнулись, заключается в том, что canvas ожидает определенные размеры в пикселях. Это хорошо, за исключением того, что дисплей Retina на iPhone 4 от POV CSS/Webkit по-прежнему имеет ширину 320 пикселей, хотя технически существует 640 фактических пикселей экрана.

Есть ли способ приспособить дисплей сетчатки с помощью Canvas on Webkit, сохранив совместимость с дисплеями без сетчатки?

Answer 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

Answer 2

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

https://github.com/jondavidjohn/hidpi-canvas-polyfill

Вы просто включаете его перед кодом для рисования, и он автоматически обеспечит вам достойную поддержку сетчатки.

Answer 3

Я не мог найти больше нигде в Интернете, предлагающего это, поэтому я понял это. Если у вас есть полноэкранный холст и вы хотите, чтобы это было фактическое количество пикселей, которое есть на устройстве, просто удалите эту строку из своего 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() выдаст те же значения, что и вы.

Answer 4

WebCode ( http://www.webcodeapp.com/) - это приложение для рисования векторов, которое генерирует JavaScript-код HTML5 Canvas для вас. Код является Retina-совместимым, вы можете проверить, как они это делают.

Answer 5

Есть очень хороший полифилл от TJ Holowaychuk:

https://www.npmjs.com/package/autoscale-canvas

Answer 6

РЕДАКТИРОВАТЬ: Только заметил, что я разместил неправильную ссылку для демо!

Разрешение Retina (или другого hdpi дисплея) определенно возможно. Вот рабочий пример:

http://spencer-evans.com/share/github/canvas-resizer/

Я также сталкивался с этим несколько раз. Принятый код ответа по существу правильный, но вы также можете использовать библиотечное решение. Я поднял один из них, чтобы выполнить интеллектуальное изменение размеров холста, чтобы сделать элемент более отзывчивым и с более высоким разрешением (как показано в демонстрации).

https://github.com/swevans/canvas-resizer