画布绘图和视网膜显示：可行吗？

发布于 2024-10-12 11:58:12 字数 196 浏览 3 评论 0原文

与phoneGap 一起使用Canvas 实现绘图。我们遇到的问题是画布需要特定的像素尺寸。这很好，只是 iPhone 4 的 Retina 显示屏（从 CSS/Webkit POV 来看仍然是 320 像素宽），尽管从技术上讲实际屏幕像素有 640 个。

是否有办法在 Webkit 上使用 Canvas 来适应视网膜显示屏，同时保持与非视网膜显示屏的兼容性？

原文

分享到QQ

分享到微博

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

发布评论

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

乙白 2024-10-19 11:58:12

上周我遇到了同样的问题，并发现了如何解决它 -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth + "px";
    canvas.style.height = canvasHeight + "px";

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

gist 上的完整代码，< a href="http://jsfiddle.net/4JH75/" rel="noreferrer">jsfiddle 上的演示

I sat with the same problem last week and discovered how to solve it -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth + "px";
    canvas.style.height = canvasHeight + "px";

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

Full code on gist, demo on jsfiddle

回复收藏 0 原文

娇纵 2024-10-19 11:58:12

有一个内置的 polyfill 可以为您处理最基本的绘图操作，并消除自动为您处理此操作的浏览器（safari）和其他不自动处理此操作的浏览器之间的歧义。

https://github.com/jondavidjohn/hidpi-canvas-polyfill

您只需包含它即可在您的绘图代码之前，它应该自动为您提供良好的视网膜支持。

回复收藏 0 原文

失与倦＂ 2024-10-19 11:58:12

另一种选择是从 HTML 中删除此行，您将获得在手机上查看网页的默认宽度。 iPhone 上应为 980 像素。

<meta name='viewport' content='width=device-width' />

然后你就可以这样做：

canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'

优点是不需要缩放并且渲染速度更快。
但它可能与设备拥有的物理像素数量不匹配。但在大多数情况下它运作良好。并非所有像素化都像 320px。但不如视网膜那么清晰。请记住，分辨率越高，延迟就越多。

Another option is to remove this line from your HTML you will get the default width for viewing a webpage on your phone. Should be 980px on iPhones.

<meta name='viewport' content='width=device-width' />

Then you can just do:

canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'

The advantage is that you don't need to scale and it renders faster.
But it probably won't match the amount of physical pixels that the device has. It works well in most cases though. Not all pixellated like 320px. But not as clear as retina. Keep in mind that the higher res you go the more laggy it will be.

回复收藏 0 原文