HTML5:矩形定位不准确

HTML5: inaccurate positioning of rectangles

本文关键字：定位 不准确 HTML5      更新时间：2023-09-26

我正在使用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 起始坐标加上 x 长度等于第二个矩形的 x 起始坐标，因此理论上它们应该在没有任何余量的情况下碰撞。可悲的是，结果是不同的：(见 http://files.clemensfreitag.de/thin_spacing.jpg(

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

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

最好克莱门斯

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

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

有关解释和架构，请参阅此处：http://canop.org/blog/?p=220

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

例如：

  • 对细线使用中间整数(一个像素宽(
  • 对 2 像素宽的线使用整数坐标

(并扩展矩形的逻辑(

相关文章：