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

Question

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

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

• 画布的显示大小在 CSS 中设置，例如canvas {width: 200px;}.
• <canvas width="100"/>底层位图大小例如在HTML 或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

我知道这是一个旧线程，但我希望我可以帮助任何其他流浪者来到这里。

有一种方法可以使“画布像素”与“设备像素”的比例尽可能接近 1:1，至少根据我在制作基于 Canvas WebGL 的游戏引擎时的经验，即使使用非整数值也是如此devicePixelRatio。

首先，我们需要明白三件事：

• CSS Size：指实际 Canvas DOM 元素大小，以 CSS 像素 ( px) 为单位。

• 画布大小：画布的逻辑大小，使用元素属性（即 ）设置canvasElem.width = 100;，这会影响您的渲染空间。

• 设备像素比：从中获得的值有效地描述了 a和 awindow之间的比率。physical pixelCSS pixel

简要示例

假设您有一个devicePixelRatioof 2.625，并且您的移动设备报告的屏幕/窗口尺寸为411 x 487- 一个奇怪的尺寸 - 您可能会说，但这是以CSS像素为单位，如果我们将它们乘以devicePixelRatio我们得到的尺寸1078 x 1278告诉我们：设备屏幕很可能实际上是一个1080 x 1280屏幕，正如您最喜欢的手机制造商最初宣传的那样。

现在，调整大小...

假设我们想要一个画布填满整个屏幕。将CSS 大小设置为与屏幕大小（或任何您想要的框大小）相匹配。

canvas.style.width = '411px';
canvas.style.height = '487px';

现在将画布大小设置为相同但按比例放大devicePixelRatio：

canvas.width = 411 * window.devicePixelRatio;
canvas.height = 487 * window.devicePixelRatio;

现在您可以渲染图像了。

当浏览器计算布局时，它必须缩小画布以使其适合其 DOM 矩形区域，缩小因子产生的cssSize / canvasSize缩小因子为1 / devicePixelRatio。

然后当浏览器需要将布局渲染到物理屏幕时，它会将其放大devicePixelRatio，从而留下总缩放比例1.0。

长话短说

超级采样。扩大画布逻辑大小，同时devicePixelRatio将 CSS 大小保持在您需要的任何大小，然后让浏览器完成剩下的工作。

注意：如果您的渲染期望画布具有一定的大小，并且这种“放大”会扰乱您的布局和/或计算，请使用 canvas 方法setTransform将您的“逻辑单位”缩小1.0 / devicePixelRatio，根本不会损失任何质量。

Answer 2

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

所以我认为你不会找到可靠的方法来获取物理像素。检查这个。

这就是为什么在Sciter中我制作了px始终代表设备物理像素的单位。并引入了dip逻辑像素单位——通过设备表面的标尺测量的英寸的 1/96（因此 W3C CSS 的 1dip ~ 1px）。

我根本不明白如何在无法在设备像素中定义对象的情况下进行认真的 UI 开发。