Вопрос по retina-display, webkit, canvas, iphone – https://github.com/swevans/canvas-resizer

16

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

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

Смотрите мой ответ для решения встраиваемого ...stackoverflow.com/a/19546481/555384 jondavidjohn

Ваш Ответ

5   ответов
0

Только заметил, что я разместил неправильную ссылку для демо!

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

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

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

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

0
0

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

Это также напоминает мне оcode.google.com/p/canvg , Обратите внимание, как он обрабатывает сетчатку. Jared Updike
3

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

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

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

Этот polyfill заставляет мой холст странно расти, каждый раз, когда я рисую на свой холст, пока в конечном счете он почти не ломает мою вкладку в Safari. Я думаю, что я попробую сделать это вручную. Jared Updike
@JaredUpdike Звучит как отличный кандидат для сообщения с помощью проблемы github с подробным примером, чтобы его можно было исправить для других. jondavidjohn
31

как ее решить -

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);
}

Полный код по сути, демо на jsfiddle

Не могли бы вы отразить этот сайт где-нибудь? Эта ссылка не работает. Connor McKay
Очень запоздалое «спасибо!» Я надеюсь попробовать это скоро. DA.
пожалуйста, всегда копируйте и вставляйте решение в stackoverflow, чтобы оно оставалось доступным, даже если сайт переходит в автономный режим. kritzikratzi
Сайт сейчас онлайн, и он ссылается на этот пример на GitHub:gist.github.com/joubertnel/870190 (который будет оставаться в сети немного дольше, я думаю) Cas Cornelissen
Примечание: это не работает без изменений! Я должен был установитьcanvas.style.width = canvasWidth + "px" чтобы это действительно работало, и то же самое дляcanvas.style.height, Я внес изменение в вопрос. wxs

Похожие вопросы