WebGLRenderingContext: blendFunc() 方法
注意：此功能在 Web Workers 中可用。
WebGLRenderingContext.blendFunc() 方法属于 WebGL API，它定义了用于像素混合运算的函数。
语法
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 分别表示源的红、绿、蓝和透明度分量，而 RD、GD、BD、AD 分别表示目标的红、绿、蓝和透明度分量。同样，RC、GC、BC、AC 分别表示常量颜色的红、绿、蓝和透明度分量。它们的值都介于 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 |
浏览器兼容性
加载中…