WebGLRenderingContext:blendFunc() 方法
WebGL API 的 WebGLRenderingContext.blendFunc()
方法定义了用于混合像素运算的函数。
语法
js
blendFunc(sfactor, dfactor)
参数
返回值
无 (undefined
)。
异常
- 如果 sfactor 或 dfactor 不是列出的可能值之一,则会抛出
gl.INVALID_ENUM
错误。 - 如果常量颜色和常量 alpha 值一起用作源和目标因子,则会抛出
gl.INVALID_ENUM
错误。
常量
以下常量可用于 sfactor 和 dfactor。
混合颜色的公式可以这样描述:color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor)。RGBA 值介于 0 和 1 之间。
在下表中,RS、GS、BS、AS 分别表示源的红色、绿色、蓝色和alpha 分量,而 RD、GD、BD、AD 分别表示目标的红色、绿色、蓝色和alpha 分量。类似地,RC、GC、BC、AC 分别表示常量颜色的红色、绿色、蓝色和alpha 分量。它们都是介于 0 和 1(包括)之间的值。
常量 | 因子 | 描述 |
---|---|---|
gl.ZERO |
0,0,0,0 | 将所有颜色乘以 0。 |
gl.ONE |
1,1,1,1 | 将所有颜色乘以 1。 |
gl.SRC_COLOR |
RS、GS、BS、AS | 将所有颜色乘以源颜色。 |
gl.ONE_MINUS_SRC_COLOR |
1-RS、1-GS、1-BS、1-AS | 将所有颜色乘以 1 减去每个源颜色。 |
gl.DST_COLOR |
RD、GD、BD、AD | 将所有颜色乘以目标颜色。 |
gl.ONE_MINUS_DST_COLOR |
1-RD、1-GD、1-BD、1-AD | 将所有颜色乘以 1 减去每个目标颜色。 |
gl.SRC_ALPHA |
AS、AS、AS、AS | 将所有颜色乘以源 alpha 值。 |
gl.ONE_MINUS_SRC_ALPHA |
1-AS、1-AS、1-AS、1-AS | 将所有颜色乘以 1 减去源 alpha 值。 |
gl.DST_ALPHA |
AD、AD、AD、AD | 将所有颜色乘以目标 alpha 值。 |
gl.ONE_MINUS_DST_ALPHA |
1-AD、1-AD、1-AD、1-AD | 将所有颜色乘以 1 减去目标 alpha 值。 |
gl.CONSTANT_COLOR |
RC、GC、BC、AC | 将所有颜色乘以常量颜色。 |
gl.ONE_MINUS_CONSTANT_COLOR |
1-RC、1-GC、1-BC、1-AC | 将所有颜色乘以 1 减去常量颜色。 |
gl.CONSTANT_ALPHA |
AC、AC、AC、AC | 将所有颜色乘以常量 alpha 值。 |
gl.ONE_MINUS_CONSTANT_ALPHA |
1-AC、1-AC、1-AC、1-AC | 将所有颜色乘以 1 减去常量 alpha 值。 |
gl.SRC_ALPHA_SATURATE |
min(AS, 1 - AD)、min(AS, 1 - AD)、min(AS, 1 - AD)、1 | 将 RGB 颜色乘以源 alpha 值或 1 减去目标 alpha 值中的较小值。alpha 值乘以 1。 |
示例
要使用混合函数,首先必须使用 WebGLRenderingContext.enable()
并传入参数 gl.BLEND
来激活混合。
js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
要获取当前的混合函数,请查询 BLEND_SRC_RGB
、BLEND_SRC_ALPHA
、BLEND_DST_RGB
和 BLEND_DST_ALPHA
常量,它们将返回混合函数常量之一。
js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true
规范
规范 |
---|
WebGL 规范 # 5.14.3 |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。