的UIWebView瓦特/ HTML5画布＆视网膜显示

Question

我的应用程序，可供本地内容一个UIWebView。如果我参加视网膜大小的图像，并用它作为身体的背景下，我可以将它的规模适当使用CSS -webkit-background-size财产做。这给了我脆，清晰的图像在iPhone 4上。

在HTML5 Canvas标签不是那么合作，但是。当我使用drawImage命令相同的视网膜尺寸的图像放到一个HTML5画布，这是巨大的 - 以及经过物理屏幕的边界。这是我使用的代码：

ctx.drawImage(retinaImage, 0, 0)

如果我尝试放置高度和宽度参数对drawImage，图像按比例缩小以适应屏幕，但它是块状和像素化。不脆像CSS背景

有没有窍门，我可以使用HTML5的Canvas等同于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：//茹贝尔。 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);

让我知道是否能解决它为您服务！