如何使WebGL画布透明 [英] How to make WebGL canvas transparent

问题描述

是否有 WebGL画布具有透明背景？
我希望通过画布可以看到网页的内容。

Is it possible to have WebGL canvas with transparent background? I want to have contents of web page visible through the canvas.

这就是我现在所拥有的： http://i50.tinypic.com/2vvq7h2.png

This is what I have now: http://i50.tinypic.com/2vvq7h2.png

如您所见，则看不到WebGL画布后面的文本。当我在CSS中更改Canvas元素的样式并添加

As you can see, the text behind the WebGL canvas is not visible. When I change style of Canvas element in CSS and add

opacity: 0.5;

页面如下所示：
http://i47.tinypic.com/302ys9c.png

我想要的但不是全部-由于CSS alpha设置所导致的文本颜色当然与黑色不同，蓝色的颜色与第一张图片中的蓝色不同。

Which is almost what I want, but not entirely - the color of text due to the CSS alpha setting is of course not the same black and color of blue shape is not the same blue as in the first picture.

谢谢您的帮助！

推荐答案

WebGL默认支持alpha透明，但是您必须使用它。最基本的是，请确保在 gl之前将透明颜色设置为透明的 gl.clearColor（0，0，0，0）。清除操作。

WebGL supports alpha transparency by default, but you have to use it. Most basically, make sure you have set the clear color to transparent, gl.clearColor(0, 0, 0, 0), before your gl.clear operation.

如果要绘制半透明的对象，则可以进行混合操作和排序的绘制，但是看起来像只是希望未绘制区域是透明的，上面的内容就足够了。

If you want to have semi-transparent objects drawn, that gets into blending operations and sorted drawing, but it looks like you just want the un-drawn area to be transparent, which the above is sufficient for.

这篇关于如何使WebGL画布透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！