连续的█字符在HTML中产生彩色线条

Question

发现此结果时，我正在尝试一些事情：

let s = "";
for (let y = 0; y < 224; y++) {
  for (let x = 0; x < 361; x++) {
    s += '█';
  }
  s += "\n"
}
document.getElementById('r').innerText = s;

#r {
  width: 1024px;
  height: 896px;
  font-size: 4px;
}

<div id="r">
</div>

您应该看到一些白色竖线以及填充div的█字符；这是因为char本身的空间很小。

但更有趣的是，如果我在JSBin或纯页中尝试使用此方法，则线条似乎是彩色的，看起来像是彩虹般的调色板。

我想知道是什么导致了这种行为（我并不是想实现某些特定的目的；我只是想知道为什么会发生这种情况）。

Answer 1

我会有一个疯狂的猜测，并说这是针对浏览器的着色器。如果放大和缩小，颜色会发生变化，因此似乎像素太少，无法正确显示白线。实际上，着色器希望在一个像素中同时显示多个事物，白色和黑色的混合，这显然在屏幕上的位置上产生了不同的颜色？

或者它甚至是故意的，有人认为这样的着色器可以混合相邻像素的颜色以平滑所有内容，看起来更好。

编辑： 总结一下，似乎这取决于您使用的浏览器以及您的硬件/系统，因为每个人在不同的浏览器上似乎会得到不同的结果。在浏览器中进行缩放操作也会产生不同的结果，对我来说，在Firefox中，有白色的水平线，但是在某些缩放级别上，也会出现垂直的彩虹线。