Canvas 元素的正确 HiDPI 渲染（使用 Konva.js）？答案

【问题标题】：Proper HiDPI rendering of Canvas elements (with Konva.js)?Canvas 元素的正确 HiDPI 渲染（使用 Konva.js）？
【发布时间】：2018-05-07 01:23:40
【问题描述】：

我使用来自 Konva.js 的组件构建了一个小型 HTML5 Canvas 动画。一切都很好，除了 Canvas 元素的大小是我期望的 2 倍——我想是因为我有一个 HiDPI/Retina 显示器。具体来说，元素看起来像

<canvas width="2048" height="1000" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1024px; height: 500px;"></canvas>

样式大小是我所期望的，但顶级宽度/高度属性值是双倍的。

我在 https://github.com/jondavidjohn/hidpi-canvas-polyfill 尝试了 HiDPI polyfill，但是虽然这使我的 Canvas 元素达到了预期的大小，但 Konva.js 元素似乎没有调整大小，并且所有这些形状的布局都完全混乱了。

所以我想知道是否有人使用 Konva.js 获得了良好的 HiDPI 行为 - 如果是，如何，如果没有，有什么技巧可以让我让它工作吗？（让我的动画在尽可能多的设备上呈现类似的效果很重要。）

【问题讨论】：

我只在 Windows 上的 Chrome 上测试过——其他浏览器的行为可能不同......

标签： canvas html5-canvas konvajs hidpi

【解决方案1】：

Konva.js 自动处理视网膜显示。 Konva 将所有画布尺寸放大两倍，以便在 HDPI 设备上自动获得清晰的结果。所以你不必担心。

【讨论】：

但是我的画布几乎占据了我的整个屏幕——2048x1000——在我的 HiDPI 屏幕上。它应该只在我的屏幕上占用 1024x500。我理解，它应该具有那些 2 倍的尺寸以保持清晰，但它应该占据我屏幕的一半左右，而不是我的全部屏幕。我可以做一些缩放吗？
@davewy 你确定它需要 2048x1000 尺寸吗？我可以看到画布有正确的样式：width: 1024px; height: 500px;
原来我正在测试的机器在操作系统设置中应用了全局缩放因子，这导致所有内容都以 2 倍大小呈现。所以 Konva 表现得非常完美/应该如此。非常感谢优秀的图书馆！ :)