UIWebView с холстом HTML5 и дисплеем Retina

В моем приложении есть UIWebView, который обслуживает локальный контент. Если я возьму изображение размером с сетчатку и использую его в качестве фона для тела, я могу правильно масштабировать его, используя свойство CSS -webkit-background-size. Это дает мне четкое, ясное изображение на iPhone 4.

Однако тег HTML5 Canvas не так удобен. Когда я использую команду drawImage для размещения изображения того же размера сетчатки на холсте HTML5, оно становится гигантским - далеко за пределами физического экрана. Это код, который я использую:

ctx.drawImage(retinaImage, 0, 0)

Если я попытаюсь установить параметры высоты и ширины на drawImage, изображение уменьшится до размера экрана, но оно будет блочным и пиксельным. Не четкий, как фон CSS.

Есть ли уловка, которую я могу использовать для холста HTML5, эквивалентную свойству CSS -webkit-background-size?

Спасибо!

Обновление:

Вот последний код, который я использовал для решения этой проблемы. Надеюсь, это поможет кому-то еще в будущем:

        if (window.devicePixelRatio == 2) {
            myCanvas.setAttribute('height', window.innerHeight * 2);
            myCanvas.setAttribute('width', window.innerWidth * 2);
            ctx.scale(2, 2);
        } else {
            myCanvas.setAttribute('height', window.innerHeight);
            myCanvas.setAttribute('width', window.innerWidth);
        }

iphone canvas html uiwebview retina-display
person Axeva    schedule 10.12.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Посетите http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and. Похоже, если вы умножите размеры на devicePixelRatio, а затем масштабируете по этому соотношению, это должно сработать.

Вот какой-то псевдокод, который у меня сработал.

var ctx = myCanvasElem.getContext("2d");
ctx.attr("width", width * window.devicePixelRatio);
ctx.attr("height", height * window.devicePixelRatio);
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(img, x, y, width, height);

Дайте мне знать, если это решит вашу проблему!

person Rob Barreca    schedule 24.03.2011
comment
Спасибо, Роб. Ваш ответ по существу совпадает с тем, что я придумал через несколько дней после того, как изначально задал вопрос. Отличная работа. - person Axeva; 26.03.2011
comment
Вы используете какую-то библиотеку? (ctx.attr()) - person Chris Bosco; 25.07.2012