位于 WebGL 画布上的文本变得模糊

Question

我遇到了一个问题，即与 WebGL 画布重叠的像素化文本变得明显模糊。图中是 (1) 略高于画布的元素，然后 (2) 接触画布（较暗的镶嵌物）。

我在这里做了一个简单的codepen示例，在Google Chrome上进行了测试：https://codepen.io/sndyx/pen/zxOojwN

这似乎不受任何属性的影响，例如

text-rendering

，

-webkit-font-smoothing

，

font-weight

，

font-size

等。我尝试过隔离画布和文本的堆叠上下文，但似乎没有效果.

有人知道如何预防吗？

Answer 1

我相信您正在寻找的是：

document.getElementById("canvas-webgl").getContext("webgl", { antialias: false });