背景颜色与 COLOR_BUFFER_BIT

Question

如果我放置一个 alpha 为零的 clearcolor，我不明白为什么我们会看到画布的 CSS 中给出的颜色，而不是 body 的 CSS 颜色。在画布上，WebGLRenderingContext.clearColor() 和 background-color 有什么区别？

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
});
gl.clearColor(0, 1, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

canvas {
  background-color: rgba(255,0,0,1);
 
}
body {
  background-color: rgba(0,0,255,1);
}

<canvas id="c"></canvas>

Answer 1

我找到了！

WebGL: How to correctly blend alpha channel png

您是否希望您的 WebGL 图像与网页混合？ 如果否，您不想与网页混合，然后执行以下操作之一 以下：

• 关闭画布中的 alpha var gl = someCanvas.getContext("webgl", { alpha: false });

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
  alpha:false
});
gl.clearColor(0, 1, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

canvas {
  background-color: rgba(255,0,0,1);
 
}
body {
  background-color: rgba(0,0,255,1);
}

<canvas id="c"></canvas>