5

我的应用程序有一个提供本地内容的 UIWebView。如果我拍摄视网膜大小的图像并将其用作身体的背景，我可以使用 CSS-webkit-background-size属性使其正确缩放。这让我在 iPhone 4 上获得了清晰的图像。

然而，HTML5 Canvas 标签并不是那么合作。当我使用该drawImage命令将相同 Retina 大小的图像放入 HTML5 画布中时，它是巨大的——远远超出了物理屏幕的范围。这是我正在使用的代码：

ctx.drawImage(retinaImage, 0, 0)

如果我尝试在 上放置高度和宽度参数drawImage，图片会缩小以适合屏幕，但它是块状和像素化的。不像 CSS 背景那样清晰。

是否有一个技巧可以用于与 CSS-webkit-background-size属性等效的 HTML5 Canvas？

谢谢！

更新：

这是我用来解决这个问题的最终代码。希望它在未来对其他人有所帮助：

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

1 回答 1

4

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

让我知道这是否可以解决您的问题！

于 2011-03-24T23:57:54.210 回答