HTML5画布渲染矩形的好奇bug(？)

Question

我使用HTML5画布预渲染精灵,并遇到一些奇怪的行为,看起来像渲染错误.以下最小示例生成它:

var CT = document.getElementById("myCanvas").getContext("2d");
CT.scale(24, 24);
CT.translate(1.0717, 0.1);
CT.rect(0.2, 0.35, 0.4, 0.1);
CT.rect(-0.05, -0.05, 0.1, 1);
CT.translate(0.4, 0);
CT.rect(-0.05, -0.05, 0.5, 1);
CT.fill();

<canvas id="myCanvas" width="50" height="30" style="border:1px solid #d3d3d3;"></canvas>

看着生成的图像,我注意到水平条会干扰左侧垂直条纹,尽管它不会碰到它.更改几何体(例如,移除右侧垂直条),会以不可预测的方式更改(据我所见)的工件.

有没有人遇到过这个问题？什么可能导致它以及如何避免它？这让我很烦恼.行为发生在不同的浏览器中(我在IE11和Firefox Quantum上测试过).

如果不清楚,请查看最左侧矩形的最左侧像素列.指向红色箭头的像素比蓝色箭头指向的像素更暗,即使右边的其他2个矩形看起来像对左边的矩形完全没有影响.

Answer 1

问题是 GPU 使用的浮点数学存在精度错误。

由于您已将渲染区域放大为正常的 24 倍，因此误差会被放大。

除了在像素边界上渲染和/或避免非常大的缩放之外，您无能为力。

下图是在 FF 上渲染的。画布顶部是红色框，其中放大的部分用红色标记以显示异常情况。最初是在透明的画布上渲染的，白色背景是在后期添加的。

请注意，该效果会影响画布的宽度。

另请注意，某些坐标不显示效果（标有绿色箭头的列）

Chrome 上不会发生这种情况，我还没有尝试过 Edge。