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

Question

是否可以设置HTML5画布中位图的大小，以使其与设备像素的显示大小完全匹配，即，即使{{1} }不是整数？

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

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

因此，webglfundamentals建议类似

canvas.clientWidth

但是如果canvas.width = Math.floor(canvas.clientWidth * window.devicePixelRatio); 是一个分数，则有时不起作用（在整数坐标上绘制的2像素宽的线是模糊的）。我的1920x1080屏幕默认情况下window.devicePixelRatio为1.5，页面缩放会对此产生影响，因此devicePixelRatio通常不是整数的原因很多。我们该怎么办？

Answer 1

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

因此，我认为您不会找到可靠的方法来获取物理像素。选中this。

这就是为什么在Sciter中我将px单位表示为始终是设备的物理像素的原因。并引入了dip单位，这些单位是逻辑像素-由标尺在设备表面测量的1/96英寸（因此是W3C CSS的1dip〜1px）。

我简直不了解如何在没有能力以设备像素定义对象的情况下进行认真的UI开发。