WebGLRenderingContext：blendFunc() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
备注： 此特性在 Web Worker 中可用。
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)。RBGA 值在 0 到 1 之间。
在以下表格中，RS、GS、BS、AS 分别表示源颜色的红色、绿色、蓝色和 alpha 分量，而 RD、GD、BD、AD 分别表示目标颜色的红色、绿色、蓝色和 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。 |
示例
要使用混合函数，你首先必须使用具有 gl.BLEND 参数的 WebGLRenderingContext.enable() 来激活混合。
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
规范
| Specification |
|---|
| WebGL Specification # 5.14.3 |