使用 phoneGap 使用 Canvas 实现绘图。我们遇到的问题是画布需要特定的像素尺寸。这很好，除了 iPhone 4 的 Retina 显示屏，来自 CSS/Webkit POV 仍然是 320 像素宽，尽管技术上实际屏幕像素为 640。
有没有办法在 Webkit 上使用 Canvas 来适应 Retina 显示器，同时保持与非 Retina 显示器的兼容性？
【问题讨论】：
标签： iphone canvas webkit retina-display
上周我遇到了同样的问题并发现了如何解决它 -
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);
}
【讨论】：
canvas.style.width = canvasWidth + "px" 才能使其真正起作用，canvas.style.height 也是如此。我已提交对问题的修改。
有一个插入式 polyfill 可以为您处理大多数基本的绘图操作，并消除浏览器之间的歧义，这些浏览器会自动为您处理（safari）和其他不自动处理的浏览器。
https://github.com/jondavidjohn/hidpi-canvas-polyfill
您只需将它包含在您的绘图代码之前，它应该会自动为您提供不错的视网膜支持。
【讨论】：
我在互联网上找不到任何其他地方暗示这一点，所以我想通了。如果您有一个全屏画布并且您希望它是设备的实际像素数量，只需从您的 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() 将给出与您看到的相同的值。
【讨论】：
WebCode (http://www.webcodeapp.com) 是一款矢量绘图应用程序，可为您生成 JavaScript HTML5 Canvas 代码。该代码与 Retina 兼容，您可以查看他们是如何做到的。
【讨论】：
TJ Holowaychuk 有一个非常好的 polyfill：
【讨论】：
编辑：刚刚注意到我发布了错误的演示链接！
Retina（或其他 hdpi 显示器）画布分辨率绝对是可能的。这里有一个工作示例：
http://spencer-evans.com/share/github/canvas-resizer/
我也碰到过几次。接受的答案代码基本上是正确的，但您也可以使用库解决方案。我做了一个处理智能画布大小调整，以使元素更具响应性和更高的分辨率（如演示中所示）。
【讨论】：