Question

我正在使用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起始坐标，因此理论上它们应该在没有任何边界的情况下发生碰撞。可悲的是，结果是不同的：（见http://files.clemensfreitag.de/thin_spacing.jpg）

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

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

最佳，克莱门

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

Answer 2

这篇文章是关注性能的，但是你可能会遇到他们描述的相同效果 - 当使用浮动时，它会将其绘制为＆＃34;模糊＆＃34;在像素之间。

http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

快速搜索表明，您可以使用整数获得更清晰的图像和更好的性能。

Answer 3

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

查看相关说明和架构：http://canop.org/blog/?p=220

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

例如：

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

（并扩展rects的逻辑）

HTML5：矩形的位置不准确

3 个答案: