iphone - open - uiwebview tutorial

UIWebView con HTML5 Canvas y Retina Display

Question

Mi aplicación tiene un UIWebView que sirve contenido local. Si tomo una imagen de tamaño de retina y la utilizo como fondo para el cuerpo, puedo hacer que -webkit-background-size correctamente usando la -webkit-background-size CSS -webkit-background-size . Esto me da una imagen nítida y clara en el iPhone 4.

Sin embargo, la etiqueta HTML5 Canvas no es tan cooperativa. Cuando uso el comando drawImage para colocar la misma imagen de retina en un lienzo HTML5, es gigantesca, mucho más allá de los límites de la pantalla física. Este es el código que estoy usando:

ctx.drawImage(retinaImage, 0, 0)

Si intento colocar los parámetros de altura y ancho en la drawImage del drawImage , la imagen se reduce para ajustarse a la pantalla, pero es cuadrada y pixelada. No es nítido como el fondo CSS.

¿Hay algún truco que pueda usar para el lienzo HTML5 que sea equivalente a la -webkit-background-size CSS -webkit-background-size ?

¡Gracias!

Actualizar:

Aquí está el código final que utilicé para resolver este problema. Esperemos que ayude a alguien más en el futuro:

        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

Consulte http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and . Parece que si multiplicas las dimensiones por el dispositivo PixelRatio, entonces escala en esa proporción y debería funcionar.

Aquí hay un pseudo-código que funcionó para mí.

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

¡Avíseme si eso lo resuelve por usted!