我的应用有一个提供本地内容的 UIWebView。如果我拍摄视网膜大小的图像并将其用作 body 的背景,我可以使用 CSS -webkit-background-size
属性使其适当缩放。这让我在 iPhone 4 上看到清晰的图像。
但是,HTML5 Canvas 标签并不是那么合作。当我使用 drawImage
命令将相同的视网膜尺寸图像放入 HTML5 Canvas 时,它是巨大的——远远超出了物理屏幕的边界。这是我正在使用的代码:
ctx.drawImage(retinaImage, 0, 0)
如果我尝试在 drawImage
上放置高度和宽度参数,图片会按比例缩小以适合屏幕,但它是 block 状和像素化的。不像 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);
}
最佳答案
查看 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);
如果这能为您解决问题,请告诉我!
关于iphone - 带有 HTML5 Canvas 和 Retina 显示屏的 UIWebView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4405710/