画布绘图和视网膜显示：可行吗？

Question

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

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

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

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

要点上的完整代码，jsfiddle 上的演示

Answer 2

有一个嵌入式填充工具可以为您处理最基本的绘图操作，并消除自动为您处理此操作的浏览器（safari）和其他不自动处理此操作的浏览器之间的歧义。

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

您只需将其包含在绘图代码之前，它就会自动为您提供良好的视网膜支持。

Answer 3

另一个选项是从 HTML 中删除此行，您将获得在手机上查看网页的默认宽度。 iPhone 上应为 980px。

<meta name='viewport' content='width=device-width' />

然后你可以这样做：

canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'

优点是不需要缩放并且渲染速度更快。 但它可能与设备拥有的物理像素数量不匹配。但在大多数情况下它运作良好。并非所有像素化都像 320px。但不如视网膜那么清晰。请记住，分辨率越高，延迟就越多。

Answer 4

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

Answer 5

TJ Holowaychuk 有一个非常好的 Polyfill：

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

Answer 6

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

Retina（或其他 hdpi 显示器）画布分辨率绝对是可能的。这里有一个工作示例：

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

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

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