0

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

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

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

最好的，克莱门斯

4

2 回答 2

2

您所看到的是叠加两种不透明颜色的结果。当第一个矩形在 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 间隙，因此我认为您最简单的解决方案是强制整数值（或者，您可以清除该列，然后用所需的颜色填充它） .

于 2012-04-29T17:25:24.470 回答
0

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

见那里的解释和模式：http ://canop.org/blog/?p=220

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

例如 ：

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

（并扩展矩形的逻辑）

于 2012-04-30T19:52:15.390 回答