Question

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

无论如何使用Canvas on Webkit来容纳视网膜显示器，同时保持与非视网膜显示器的兼容性？

Answer 1

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

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;
    canvas.style.height = canvasHeight;

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

Full code on gist，demo on jsfiddle

Answer 2

有一个嵌入式polyfill将为您处理大多数基本的绘图操作，并消除为您自动处理此问题的浏览器（safari）和其他不支持的浏览器之间的歧义。

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

您只需在绘图代码之前添加它，它应该会自动为您提供合适的视网膜支持。

Answer 3

WebCode（http://www.webcodeapp.com）是一个矢量绘图应用程序，可为您生成JavaScript HTML5 Canvas代码。该代码与Retina兼容，您可以查看他们是如何做到的。

Answer 4

编辑：刚刚注意到我发布了错误的演示链接！

视网膜（或其他hdpi显示）画布分辨率绝对是可能的。这里有一个有效的例子：

http://spencer-evans.com/share/github/canvas-resizer/

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

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

Answer 5

TJ Holowaychuk有一种非常好的填充物：

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

Answer 6

我在互联网上找不到其他地方可以暗示这一点，所以我想出了办法。如果您有一个全屏画布，并且希望它是设备的实际像素数量，则只需从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（）将提供与您看到的相同的值。

画布绘图和Retina显示：可行吗？

6 个答案: