UIWEBVIEW W/ HTML5 Canvas & Retina Display

Question

يحتوي تطبيقي على 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);
        }

Answer 1

الدفع http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones- و. يبدو أنه إذا كنت تعدد الأبعاد التي أجراها جهاز 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);

اسمحوا لي أن أعرف إذا كان هذا يحلها لك!