使用 phoneGap 使用 Canvas 实现绘图。我们遇到的问题是画布需要特定的像素尺寸。这很好，除了 iPhone 4 的 Retina 显示屏，来自 CSS/Webkit POV 仍然是 320 像素宽，尽管从技术上讲有 640 个实际屏幕像素。
有没有办法在 Webkit 上使用 Canvas 来适应视网膜显示，同时保持与非视网膜显示的兼容性？
问问题
17186 次
6 回答
39
上周我遇到了同样的问题并发现了如何解决它-
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);
}
于 2011-03-15T02:37:28.783 回答
3
有一个插入式 polyfill 将为您处理大多数基本的绘图操作，并消除为您自动处理此操作的浏览器（safari）和其他不为您处理的浏览器之间的歧义。
https://github.com/jondavidjohn/hidpi-canvas-polyfill
您只需将它包含在您的绘图代码之前，它应该会自动为您提供不错的视网膜支持。
于 2013-10-23T15:51:02.373 回答
1
我在互联网上找不到任何其他地方暗示这一点，所以我想通了。如果您有一个全屏画布并且您希望它是设备的实际像素数量，只需从您的 HTML中删除此行：
<meta name='viewport' content='width=device-width' />
根本不要设置视口。然后，您只需执行以下操作：
canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'
这将使用设备的全屏分辨率。一个像素永远是一个像素。你不需要扩展。getImageData() 将给出与您看到的相同的值。
于 2019-09-10T06:33:23.470 回答
0
WebCode ( http://www.webcodeapp.com ) 是一个矢量绘图应用程序，可为您生成 JavaScript HTML5 Canvas 代码。该代码与 Retina 兼容，您可以查看他们是如何做到的。
于 2013-06-06T09:58:33.000 回答
0
编辑：刚刚注意到我发布了错误的演示链接！
视网膜（或其他 hdpi 显示器）画布分辨率绝对是可能的。这里有一个工作示例：
http://spencer-evans.com/share/github/canvas-resizer/
我也碰到过几次。接受的答案代码基本上是正确的，但您也可以使用库解决方案。我启动了一个来处理智能画布重新调整大小，以使元素更具响应性和更高的分辨率（如演示中所示）。
于 2015-11-06T02:34:02.800 回答
0
TJ Holowaychuk 有一个非常好的 polyfill：
于 2015-11-07T08:41:09.890 回答