使用 phoneGap 使用 Canvas 实现绘图。我们遇到的问题是画布需要特定的像素尺寸。这很好,除了 iPhone 4 的 Retina 显示屏,来自 CSS/Webkit POV 仍然是 320 像素宽,尽管从技术上讲有 640 个实际屏幕像素。
有没有办法在 Webkit 上使用 Canvas 来适应视网膜显示,同时保持与非视网膜显示的兼容性?
使用 phoneGap 使用 Canvas 实现绘图。我们遇到的问题是画布需要特定的像素尺寸。这很好,除了 iPhone 4 的 Retina 显示屏,来自 CSS/Webkit POV 仍然是 320 像素宽,尽管从技术上讲有 640 个实际屏幕像素。
有没有办法在 Webkit 上使用 Canvas 来适应视网膜显示,同时保持与非视网膜显示的兼容性?
上周我遇到了同样的问题并发现了如何解决它-
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);
}
有一个插入式 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 兼容,您可以查看他们是如何做到的。
编辑:刚刚注意到我发布了错误的演示链接!
视网膜(或其他 hdpi 显示器)画布分辨率绝对是可能的。这里有一个工作示例:
http://spencer-evans.com/share/github/canvas-resizer/
我也碰到过几次。接受的答案代码基本上是正确的,但您也可以使用库解决方案。我启动了一个来处理智能画布重新调整大小,以使元素更具响应性和更高的分辨率(如演示中所示)。
TJ Holowaychuk 有一个非常好的 polyfill: