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

如果能为您解决问题，请告诉我！

UIWebView w / HTML5 Canvas＆amp; Retina显示屏

1 个答案: