连续的█字符在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中,有白色的水平线,但在某些缩放级别上,也会出现垂直的彩虹线.