如何设置 HTML5 画布大小以匹配设备像素中的显示大小

Question

是否可以在 HTML5 画布中设置位图的大小，使其与设备像素的显示大小完全匹配，即用于显示画布的物理像素数，即使 window.devicePixelRatio 是不是整数？

关于如何在webglfundamentals 上调整画布大小有很好的描述，但它不能正确处理非整数devicePixelRatios。到目前为止我的理解：

• 画布的显示大小在 CSS 中设置，例如 canvas {width: 200px;}。
• 底层位图大小设置为，例如，HTML 中的 <canvas width="100"/> 或 JS 中的 canvas.width = 100。
• 位图将被拉伸以适应 CSS 大小（受object-fit 和object-position 影响）。
• 我们可以将位图大小设置为等于一些涉及canvas.clientWidth 的表达式。
• canvas.clientWidth 是一个整数，其单位是 CSS 像素，是计算出的内容宽度（加上填充）。我不知道浏览器是否真的将内容绘制成整数个 CSS 像素或整数个设备像素。

所以 webglfundamentals 建议类似

canvas.width = Math.floor(canvas.clientWidth * window.devicePixelRatio);

但是如果window.devicePixelRatio 是一个分数，这有时不起作用（在整数坐标上绘制的 2 像素宽的线是模糊的）。默认情况下，我的 1920x1080 屏幕的 devicePixelRatio 为 1.5，页面缩放会影响这一点，因此 devicePixelRatio 通常不是整数的原因有很多。我们能做什么？

Answer 1

1px 是 CSS/DOM 领域中的逻辑长度单位。点。

所以我认为您不会找到获取物理像素的可靠方法。检查this。

这就是为什么在Sciter 中我使用px 单位来代表设备的物理像素。并引入了dip 单位，它们是逻辑像素 - 由设备表面的标尺测量的 1/96 英寸（因此 W3C CSS 的 1dip ~ 1px）。

如果没有以设备像素定义对象的能力，我根本不明白如何进行认真的 UI 开发。