webgl - WebGL blendFunc bug 还是误解？

Question

我正在尝试在黑色背景上绘制一个半透明的黑色三角形。

这是我的示例：http ://codewithoutborders.com/posted/blend.html

blendFunc 已设置并启用（第 151 行）：

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);

缓冲区被清除为黑色（第 129 行）：

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

着色器填充半透明黑色（第 10 行）：

gl_FragColor = vec4(0.0, 0.0, 0.0, .5);

我希望三角形是黑色的，因为文档指出

result = {foreground}*sourceAlpha + {background}*(1-sourceAlpha)
       = (0,0,0,.5)*.5 + (0,0,0,1)*.5
       = (0,0,0,.75)

哪个是黑色的，对吧？

那么灰色是从哪里来的呢？

Answer 1

（多么尴尬。在发布后 3 分钟回答我自己的问题，但不是在严重脱发之前）

灰色来自 HTML 页面的白色背景，在通过其他黑色画布“打孔”一个 3/4 透明孔后显示出来。

添加

style="background:black;"

到标签解决了这个问题。

[下面gman的评论是一个更好的解决方法]