18

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

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

4

6 回答 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);
}

gist 上的完整代码，jsfiddle上的演示

于 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/

我也碰到过几次。接受的答案代码基本上是正确的，但您也可以使用库解决方案。我启动了一个来处理智能画布重新调整大小，以使元素更具响应性和更高的分辨率（如演示中所示）。

https://github.com/swevans/canvas-resizer

于 2015-11-06T02:34:02.800 回答
0

TJ Holowaychuk 有一个非常好的 polyfill：

https://www.npmjs.com/package/autoscale-canvas

于 2015-11-07T08:41:09.890 回答