Смежный символ █ создает цветную строку в HTML

Я пытался что-то сделать, когда нашел этот результат:

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>

Ответ 1

У меня будет дикая догадка и скажу, что это конкретный шейдер. Если вы увеличиваете и уменьшаете цвет, то кажется, что слишком мало пикселей, чтобы правильно отобразить белую линию. Практически шейдер хочет отображать несколько вещей одновременно в одном пикселе, сочетание белого и черного, что, по-видимому, дает другой цвет, зависящий от положения на экране?

Или, может быть, его даже нарочно, и кто-то подумал, что такой шейдер, который смешивает цвета соседних пикселей, чтобы сгладить все, выглядит лучше.

EDIT: чтобы подвести некоторые комментарии, кажется, что это зависит от браузера, используемого вами, а также от вашего оборудования/системы, поскольку все, кажется, получают разные результаты в разных браузерах. Игра с увеличением в браузере также дает разные результаты, для меня в Firefox есть белые горизонтальные линии, но на некоторых уровнях масштабирования также появляются вертикальные линии радуги.