WebGLRenderingContext: blendFuncSeparate() 方法

基线 广泛可用

此功能已广泛建立，可在许多设备和浏览器版本中使用。它自 2015 年 7 月.

报告反馈

语法

WebGLRenderingContext.blendFuncSeparate() 方法是 WebGL API 的一个方法，它定义了分别对 RGB 和 alpha 分量进行像素混合运算时所用的函数。
blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)

js

参数

srcRGB

一个 GLenum，指定红色、绿色和蓝色 (RGB) 源混合因子的乘数。默认值为 gl.ONE。有关可能的值，请参见下文。

dstRGB

一个 GLenum，指定红色、绿色和蓝色 (RGB) 目标混合因子的乘数。默认值为 gl.ZERO。有关可能的值，请参见下文。

srcAlpha

一个 GLenum，指定 alpha 源混合因子的乘数。默认值为 gl.ONE。有关可能的值，请参见下文。

dstAlpha

一个 GLenum，指定 alpha 目标混合因子的乘数。默认值为 gl.ZERO。有关可能的值，请参见下文。

返回值

无 (undefined)。

  • 异常
  • 如果 srcRGB、dstRGB、srcAlpha 或 dstAlpha 不是列出的可能值之一，则会抛出 gl.INVALID_ENUM 错误。

常量

如果常量颜色和常量 alpha 值一起用作源 (srcRGB) 和目标 (dstRGB) 因子，则会抛出 gl.INVALID_ENUM 错误。

以下常量可用于 srcRGB、dstRGB、srcAlpha 和 dstAlpha

  • 混合因子的公式可以这样描述（所有 RGBA 值都在 0 到 1 之间）
  • color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)

color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)

在下表中，RS、GS、BS、AS 分别代表源的红色、绿色、蓝色和alpha 分量，而 RD、GD、BD、AD 分别代表目标的红色、绿色、蓝色和alpha 分量。类似地，RC、GC、BC、AC 分别代表常量颜色的红色、绿色、蓝色和alpha 分量。它们都是 0 到 1 之间的数值，包括 0 和 1。 常量 RGB 因子 Alpha 因子
描述 0,0,0 0 gl.ZERO
将所有颜色乘以 0。 1,1,1,1 1 gl.ONE
将所有颜色乘以 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 RS, GS, BS AS, AS, AS
将所有颜色乘以源 alpha 颜色。 gl.ONE_MINUS_SRC_ALPHA 1-RS, 1-GS, 1-BS 1-AS, 1-AS, 1-AS
将所有颜色乘以 1 减去源 alpha 颜色。 gl.DST_ALPHA RD, GD, BD AD, AD, AD
将所有颜色乘以目标 alpha 颜色。 gl.ONE_MINUS_DST_ALPHA 1-RD, 1-GD, 1-BD 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 RC, GC, BC AC, AC, AC
将所有颜色乘以常量 alpha 值。 gl.ONE_MINUS_CONSTANT_ALPHA 1-RC, 1-GC, 1-BC 1-AC, 1-AC, 1-AC
将所有颜色乘以 1 减去常量 alpha 值。 gl.SRC_ALPHA_SATURATE 1 min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD)

示例

将 RGB 颜色乘以源 alpha 颜色或 1 减去目标 alpha 颜色的较小值。alpha 值乘以 1。

WebGLRenderingContext.blendFuncSeparate() 方法是 WebGL API 的一个方法，它定义了分别对 RGB 和 alpha 分量进行像素混合运算时所用的函数。
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);

要使用混合函数，首先需要使用 WebGLRenderingContext.enable() 启用混合，参数为 gl.BLEND。

WebGLRenderingContext.blendFuncSeparate() 方法是 WebGL API 的一个方法，它定义了分别对 RGB 和 alpha 分量进行像素混合运算时所用的函数。
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true

规范

要获取当前混合函数，请查询 BLEND_SRC_RGB、BLEND_SRC_ALPHA、BLEND_DST_RGB 和 BLEND_DST_ALPHA 常量，它们将返回其中一个混合函数常量。
规范
# 5.14.3

浏览器兼容性

WebGL 规范

另请参阅