Рисование холста и отображение Retina: выполнимо? - PullRequest
Новая
       22

Рисование холста и отображение Retina: выполнимо?

16 голосов
/ 18 января 2011

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

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

Ответы [ 5 ]

32 голосов
/ 15 марта 2011

Я сидел с той же проблемой на прошлой неделе и обнаружил, как ее решить - 

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

3 голосов
/ 23 октября 2013

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

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

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

0 голосов
/ 07 ноября 2015

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

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

0 голосов
/ 06 ноября 2015

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

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

http://spencer -evans.com / доля / GitHub / холст-переклассификатор /

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

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

0 голосов
/ 06 июня 2013

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

...