WebGLRenderingContext:blendFunc() 方法

基线 广泛可用

此功能已得到很好的建立,并且可以在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2015 年 7 月.

WebGL API 的 WebGLRenderingContext.blendFunc() 方法定义了用于混合像素运算的函数。

语法

js
blendFunc(sfactor, dfactor)

参数

sfactor

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

dfactor

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

返回值

无 (undefined)。

异常

  • 如果 sfactordfactor 不是列出的可能值之一,则会抛出 gl.INVALID_ENUM 错误。
  • 如果常量颜色和常量 alpha 值一起用作源和目标因子,则会抛出 gl.INVALID_ENUM 错误。

常量

以下常量可用于 sfactordfactor

混合颜色的公式可以这样描述: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_RGBBLEND_SRC_ALPHABLEND_DST_RGBBLEND_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 的浏览器中加载。

另请参阅