Iphone UIWebView w/HTML5画布和;视网膜显示屏

Iphone UIWebView w/HTML5画布和;视网膜显示屏,iphone,html,canvas,uiwebview,retina-display,Iphone,Html,Canvas,Uiwebview,Retina Display,我的应用程序有一个提供本地内容的UIWebView。如果我使用视网膜大小的图像作为身体的背景,我可以使用CSS-webkit background size属性使其适当缩放。这让我在iPhone4上看到了清晰的图像 然而,HTML5画布标签并不那么合作。当我使用drawImage命令将相同视网膜大小的图像放入HTML5画布时,它是巨大的——远远超出了物理屏幕的界限。这是我正在使用的代码: ctx.drawImage(retinaImage, 0, 0) 如果我尝试在drawImage上放置高度

我的应用程序有一个提供本地内容的UIWebView。如果我使用视网膜大小的图像作为身体的背景,我可以使用CSS
-webkit background size
属性使其适当缩放。这让我在iPhone4上看到了清晰的图像

然而,HTML5画布标签并不那么合作。当我使用
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);
        }
退房。看起来,如果您使用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);

如果这能帮你解决问题,请告诉我

谢谢你,罗布。你的答案基本上与我最初提出这个问题几天后得出的答案相符。干得好。你在用图书馆吗?(
ctx.attr()