javascript - HTML5 : inaccurate positioning of rectangles

Question

我正在使用 HTML5 的 Canvas 创建一个“预览”图像，该图像主要由一些矩形和简单的线条组成。到目前为止工作正常，但有一个问题我无法以某种方式解决。假设以下情况:

context.fillStyle = "rgba(0,0,0,0.75)";
context.fillRect(100.64646,100,50.94967,20);
context.fillRect(100.64646+50.94967,100,100,20);

所以我画了 2 个具有一定不透明度的矩形。第一个矩形的 x 起始坐标加上第一个矩形的 x 长度等于第二个矩形的 x 起始坐标，因此理论上它们应该碰撞，之间没有任何余量。遗憾的是，结果却不同:(参见http://files.clemensfreitag.de/thin_spacing.jpg)

框之间的间距非常小，并且背景颜色可见。但:如果坐标和长度是整数值，则不会出现此问题。

有什么办法可以通过使用浮点值来完成它吗？在我的应用程序中，在绘制之前将它们转换为整数可能是可以接受的，但我只是想知道为什么这不适用于 float 。

最好，克莱门斯

Answer 1

您所看到的是叠加两种不透明颜色的结果。当第一个矩形在 151.59613 结束时，该矩形会自动消除锯齿，并用 rgba(0,0,0,0.4470975) 填充最右边的列。当第二个矩形从相同的 x 坐标开始时，它也会进行抗锯齿处理，并用 rgba(0,0,0,0.3029025) 填充最左边的列(与第一个矩形的最右边的列相同)。这两个值相加确实为 rgba(0,0,0,0.75)，但这不是它们混合的方式。相反，第二种颜色 (rgba(0,0,0,.3029025)) 绘制在第一种颜色之上，结果为 rgba(0,0,0,0.4470975+(1-0.4470975)*0.3029025) = rgba(0 ,0,0,0.61457305)。因此，两个矩形之间实际上并不存在间隙，而是一个 1px 的列，其灰色阴影稍浅。

类似地，如果您使用纯色，那么第二个矩形的抗锯齿列将覆盖第一个矩形的抗锯齿列，从而在“间隙”中产生更浅的灰色阴影。

整数值不会出现此问题，因为不需要抗锯齿 - 每个矩形都以像素边缘结束。

看起来 globalCompositeOperation 设置都无法解决此问题，并且关闭抗锯齿功能有时会导致 1px 间隙，因此我认为最简单的解决方案是强制使用整数值(或者，您可以清除然后将该列填充为所需的颜色)。