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

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

窗口。devicePixelRatio

不是整数？

关于如何在上调整画布大小有很好的描述，但它不能正确处理非整数

devicePixelRatio

s。到目前为止，我的理解是：

• 画布的显示大小在CSS中设置，例如，

  canvas{width:200px；}

• 基本位图大小设置为，例如，HTML中的
  或JS中的

  canvas.width=100

• 位图将被拉伸以适合CSS大小（如何受

  对象匹配

  和

  对象位置

  的影响）
• 我们可以将位图大小设置为与包含

  canvas.clientWidth

  的表达式相等

• canvas.clientWidth

  是一个整数，其单位为CSS像素，是内容的计算宽度（加上填充）。我不知道浏览器是否真的将内容绘制成一整块CSS像素或一整块设备像素

因此，webglfundamentals建议

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

---

但是，如果window.devicePixelRatio是一个分数，这有时不起作用（在整数坐标上绘制的2像素宽的线是模糊的）。我的1920x1080屏幕默认情况下的

devicePixelRatio

为1.5，页面缩放会影响这一点，因此有很多原因说明

devicePixelRatio

通常不是整数。我们能做什么？

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

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

这就是为什么我在中制作了

px

单元来表示设备的物理像素。并引入了

dip

逻辑像素单位-设备表面标尺测量的1/96英寸（W3CCSS的1dip~1px）

---

如果没有以设备像素定义对象的能力，我简直无法理解如何进行严肃的UI开发。

窗口。devicePixelRatio

永远不会是整数，根据：双精度浮点value@JackBashford我认为他指的是一个自然数，而不是分数，所以他指的是他想在@NielsNet中将其四舍五入？你能不能用CSS将画布的宽度和高度设置为100%？Jonathan，不，这只会影响显示大小，而不考虑位图大小。感谢您作为UI授权机构回复，并提供指向常见问题的链接。我还是把这个问题留待讨论。