UIWebView w/ HTML5 Canvas 和视网膜显示屏

发布于 2024-10-07 02:57:30 字数 949 浏览 2 评论 0原文

我的应用程序有一个提供本地内容的 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);
        }

原文

My app has a UIWebView that serves up local content. If I take a retina size image and use it as a background for the body, I can make it scale properly using the CSS -webkit-background-size property. This gives me a crisp, clear image on the iPhone 4.

The HTML5 Canvas tag isn't so cooperative, however. When I use the drawImage command to place the same retina size image into an HTML5 canvas, it's gigantic -- well past the bounds of the physical screen. This is the code I'm using:

ctx.drawImage(retinaImage, 0, 0)

If I try placing height and width parameters on the drawImage, the picture scales down to fit the screen, but it's blocky and pixelated. Not crisp like the CSS background.

Is there a trick I can use for the HTML5 Canvas that is equivalent to the CSS -webkit-background-size property?

Thanks!

Update:

Here's the final code I used to solve this problem. Hopefully it helps someone else in the future:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍暮颜 2024-10-14 02:57:30

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

让我知道这是否能为您解决问题！

Check out http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and. Looks like if you multiple the dimensions by the devicePixelRatio then scale by that ratio as well it should work.

Here's some pseudo-code that worked for me.

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

Let me know if that solves it for you!

回复收藏 0 原文

~没有更多了~