HTML5：矩形定位不准确答案

【问题标题】：HTML5: inaccurate positioning of rectanglesHTML5：矩形定位不准确
【发布时间】：2012-05-01 03:52:15
【问题描述】：

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

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-starting 坐标加上 x-length 等于第二个 rect 的 x-starting 坐标，所以理论上它们之间应该没有任何边距发生碰撞。可悲的是，结果是不同的：（见http://files.clemensfreitag.de/thin_spacing.jpg）

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

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

最好，克莱门斯

【问题讨论】：

JS Fiddle demo 能看工作，能工作吗？这样我们就不必猜测您的整个代码/脚本。
当然（见jsfiddle.net/nowjab23/qjzfU/1）。我只是想知道为什么在上面的盒子组合中两个矩形之间有一定的间距，而在较低的地方，使用整数的地方，没有
您可能对我刚刚发表的关于在画布上定位的博文感兴趣：canop.org/blog/?p=220（这与另一个线条不规则的 SO 问题有关）。是否使用整数，或者“中间整数”实际上很重要。
@dystroy：谢谢！很好的主意！将把它列入我的清单，以便将来改进我的工具。
我在回答中详细说明了这个想法和建议。最重要的一点是清楚地弄清楚会发生什么，这样你就知道什么时候使用整数，什么时候使用整数半。

标签： javascript html canvas

【解决方案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 的间隙，所以我认为您最简单的解决方案是强制整数值（或者，您可以清除该列然后填充它用所需的颜色）。

【讨论】：

感谢您的详细输入，我不知道（事实上，相当容易理解）使用浮点值会强制浏览器对边缘进行抗锯齿处理的效果。我会在绘制之前将值转换为整数。
我认为你对抗锯齿的看法是对的！四舍五入的差异呢？
汤姆，我不确定你的意思。浮点精度误差？ Clemens 舍入为整数时丢弃的部分？
当然，将它们转换为整数意味着一些舍入误差，但是当我们谈论小于 1px 的长度时，至少在我的情况下，没有人会认出这些。

【解决方案2】：

这个问题与对象在基于浮点的网格上绘制的方式有关（尤其是垂直和水平线，因此是矩形）。

请参阅那里以获取解释和架构：http://canop.org/blog/?p=220

根据对象的大小，您需要为形状使用整数或中间整数坐标和大小，目标是在两个维度上填充完整的像素。

例如：

使用中间整数表示细线（一个像素宽度）
对 2 像素宽的线使用整数坐标

（并扩展矩形的逻辑）

【讨论】：