Javascript HTML5：矩形定位不准确

我正在使用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);

我画了两个不透明度的矩形。第一个矩形的x起始坐标加上x长度等于第二个矩形的x起始坐标，因此理论上它们之间应该碰撞而没有任何边界。可悲的是，结果不同： （见附件）

盒子之间的间距很小，背景色也很明显。但是： 如果坐标和长度为整数值，则不会出现此问题。

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

最好的，

---

克莱门斯

你看到的是两种不透明颜色叠加的结果。当第一个矩形在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,0.4470975+（1-0.4470975）*0.3029025）=rgba（0,0,0,0,0.61457305）。因此，两个矩形之间实际上没有间隙，而是一个1px的列，它的灰色略浅

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

由于不需要消除混叠，因此整数值不会出现问题-每个矩形都在像素的边缘结束

---

看起来没有任何

globalCompositeOperation

设置可以解决这个问题，关闭抗锯齿有时会导致1px的间隔，因此我认为最简单的解决方案是强制使用整数值（或者，您可以清除该列，然后用所需的颜色填充）.

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

有关说明和模式，请参见此处：

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

例如：

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

---

（并扩展rect的逻辑）

我们可以看到它在工作，并且可以使用它？这样，我们就不必猜测整个代码/脚本。当然可以（请参阅）。我只是想知道为什么在上框组合中，两个矩形之间有一定的间距，而在下框中，在使用整数的地方，你可能对我刚刚发表的关于在画布上定位的这篇博文不感兴趣：（这与另一个关于线条不规则的问题有关）。是否使用整数，或者“中间整数”实际上很重要。@dystroy:谢谢！好主意！我将把这个列在我的清单上，以便将来改进我的工具。我在回答中详细介绍了这个想法并给出了建议。最重要的一点是要清楚地知道发生了什么，这样你就知道什么时候使用整数，什么时候使用整数和半。谢谢你的详细输入，我没有意识到使用浮点值会强制浏览器消除边缘锯齿的效果（事实上，很容易理解）。在画图之前我会把这些值转换成整数。我想你的反爱玲是对的！舍入差呢？汤姆，我不知道你的意思。浮点精度误差？当克莱门斯将它们舍入整数时被丢弃的部分？当然，将它们转换为整数意味着一些舍入错误，但是当我们谈论小于1px的长度时，没有人会识别这些，至少在我的例子中是这样。