在此页

• 句法
• 常量
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

WebGLRenderingContext.blendFuncSeparate() 方法在 WebGL API defines which function is used for blending pixel arithmetic for RGB and alpha components separately.

句法

void gl.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha);
					

参数

srcRGB

A GLenum specifying a multiplier for the red, green and blue (RGB) source blending factors. The default value is gl.ONE . For possible values, see below.

dstRGB

A GLenum specifying a multiplier for the red, green and blue (RGB) destination blending factors. The default value is gl.ZERO . For possible values, see below.

srcAlpha

A GLenum specifying a multiplier for the alpha source blending factor. The default value is gl.ONE . For possible values, see below.

dstAlpha

A GLenum specifying a multiplier for the alpha destination blending factor. The default value is gl.ZERO . For possible values, see below.

返回值

None.

异常

• 若 srcRGB , dstRGB , srcAlpha ，或 dstAlpha is not one of the listed possible values, a gl.INVALID_ENUM error is thrown.
• If a constant color and a constant alpha value are used together as source ( srcRGB ) and destination ( dstRGB ) factors, a gl.INVALID_ENUM error is thrown.

常量

The following constants can be used for srcRGB , dstRGB , srcAlpha ，和 dstAlpha

The formulas for the blending factors can be described like this (all RGBA values are between 0 and 1):

• color(RGB) = (sourceColor * srcRGB ) + (destinationColor * dstRGB )
• color(A) = (sourceAlpha * srcAlpha ) + (destinationAlpha * dstAlpha )

常量	RGB factor	Alpha factor	描述
gl.ZERO	0,0,0	0	Multiplies all colors by 0.
gl.ONE	1,1,1,1	1	Multiplies all colors by 1.
gl.SRC_COLOR	R S , G S , B S	A S	Multiplies all colors by the source colors.
gl.ONE_MINUS_SRC_COLOR	1-R S , 1-G S , 1-B S	1-A S	Multiplies all colors by 1 minus each source color.
gl.DST_COLOR	R D , G D , B D	A D	Multiplies all colors by the destination color.
gl.ONE_MINUS_DST_COLOR	1-R D , 1-G D , 1-B D	1-A D	Multiplies all colors by 1 minus each destination color.
gl.SRC_ALPHA	A S , A S , A S	A S	Multiplies all colors by the source alpha color.
gl.ONE_MINUS_SRC_ALPHA	1-A S , 1-A S , 1-A S	1-A S	Multiplies all colors by 1 minus the source alpha color.
gl.DST_ALPHA	A D , A D , A D	A D	Multiplies all colors by the destination alpha color.
gl.ONE_MINUS_DST_ALPHA	1-A D , 1-A D , 1-A D	1-A D	Multiplies all colors by 1 minus the destination alpha color.
gl.CONSTANT_COLOR	R C , G C , B C	A C	Multiplies all colors by a constant color.
gl.ONE_MINUS_CONSTANT_COLOR	1-R C , 1-G C , 1-B C	1-A C	Multiplies all colors by 1 minus a constant color.
gl.CONSTANT_ALPHA	A C , A C , A C	A C	Multiplies all colors by a constant alpha value.
gl.ONE_MINUS_CONSTANT_ALPHA	1-A C , 1-A C , 1-A C	1-A C	Multiplies all colors by 1 minus a constant alpha value.
gl.SRC_ALPHA_SATURATE	min(A S , 1 - A D ), min(A S , 1 - A D ), min(A S , 1 - A D )	1	Multiplies the RGB colors by the smaller of either the source alpha color or the value of 1 minus the destination alpha color. The alpha value is multiplied by 1.

范例

To use the blend function, you first have to activate blending with WebGLRenderingContext.enable() with the argument gl.BLEND .

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
					

To get the current blend function, query the BLEND_SRC_RGB , BLEND_SRC_ALPHA , BLEND_DST_RGB ，和 BLEND_DST_ALPHA constants which return one of the blend function constants.

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
					

规范

规范	状态	注释
WebGL 1.0 The definition of 'blendFunc' in that specification.	推荐	初始定义。 In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification.
OpenGL ES 2.0 The definition of 'glBlendFunc' in that specification.	标准	Man page of the OpenGL API.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
blendFuncSeparate	Chrome 9	Edge 12	Firefox 4	IE 11	Opera 12	Safari 5.1	WebView Android Yes	Chrome Android 25	Firefox Android Yes	Opera Android 12	Safari iOS 8	Samsung Internet Android 1.5
SharedArrayBuffer as a parameter	Chrome 60	Edge ≤79	Firefox 79	IE ?	Opera 47	Safari ?	WebView Android 60	Chrome Android 60	Firefox Android ?	Opera Android 44	Safari iOS ?	Samsung Internet Android 8.0

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

另请参阅

• WebGLRenderingContext.blendColor()
• WebGLRenderingContext.blendEquation()

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. WebGL API
2. WebGLRenderingContext
3. 特性

   1. canvas
   2. drawingBufferHeight
   3. drawingBufferWidth
4. 方法

   1. activeTexture()
   2. attachShader()
   3. bindAttribLocation()
   4. bindBuffer()
   5. bindFramebuffer()
   6. bindRenderbuffer()
   7. bindTexture()
   8. blendColor()
   9. blendEquation()
   10. blendEquationSeparate()
   11. blendFunc()
   12. blendFuncSeparate()
   13. bufferData()
   14. bufferSubData()
   15. checkFramebufferStatus()
   16. clear()
   17. clearColor()
   18. clearDepth()
   19. clearStencil()
   20. colorMask()
   21. commit()
   22. compileShader()
   23. compressedTexImage[23]D()
   24. compressedTexSubImage2D()
   25. copyTexImage2D()
   26. copyTexSubImage2D()
   27. createBuffer()
   28. createFramebuffer()
   29. createProgram()
   30. createRenderbuffer()
   31. createShader()
   32. createTexture()
   33. cullFace()
   34. deleteBuffer()
   35. deleteFramebuffer()
   36. deleteProgram()
   37. deleteRenderbuffer()
   38. deleteShader()
   39. deleteTexture()
   40. depthFunc()
   41. depthMask()
   42. depthRange()
   43. detachShader()
   44. disable()
   45. disableVertexAttribArray()
   46. drawArrays()
   47. drawElements()
   48. enable()
   49. enableVertexAttribArray()
   50. finish()
   51. flush()
   52. framebufferRenderbuffer()
   53. framebufferTexture2D()
   54. frontFace()
   55. generateMipmap()
   56. getActiveAttrib()
   57. getActiveUniform()
   58. getAttachedShaders()
   59. getAttribLocation()
   60. getBufferParameter()
   61. getContextAttributes()
   62. getError()
   63. getExtension()
   64. getFramebufferAttachmentParameter()
   65. getParameter()
   66. getProgramInfoLog()
   67. getProgramParameter()
   68. getRenderbufferParameter()
   69. getShaderInfoLog()
   70. getShaderParameter()
   71. getShaderPrecisionFormat()
   72. getShaderSource()
   73. getSupportedExtensions()
   74. getTexParameter()
   75. getUniform()
   76. getUniformLocation()
   77. getVertexAttrib()
   78. getVertexAttribOffset()
   79. hint()
   80. isBuffer()
   81. isContextLost()
   82. isEnabled()
   83. isFramebuffer()
   84. isProgram()
   85. isRenderbuffer()
   86. isShader()
   87. isTexture()
   88. lineWidth()
   89. linkProgram()
   90. pixelStorei()
   91. polygonOffset()
   92. readPixels()
   93. renderbufferStorage()
   94. sampleCoverage()
   95. scissor()
   96. shaderSource()
   97. stencilFunc()
   98. stencilFuncSeparate()
   99. stencilMask()
   100. stencilMaskSeparate()
   101. stencilOp()
   102. stencilOpSeparate()
   103. texImage2D()
   104. texParameter[fi]()
   105. texSubImage2D()
   106. uniform[1234][fi][v]()
   107. uniformMatrix[234]fv()
   108. useProgram()
   109. validateProgram()
   110. vertexAttrib[1234]f[v]()
   111. vertexAttribPointer()
   112. viewport()
5. WebGL 相关页面

   1. ANGLE_instanced_arrays
   2. EXT_blend_minmax
   3. EXT_color_buffer_half_float
   4. EXT_disjoint_timer_query
   5. EXT_frag_depth
   6. EXT_sRGB
   7. EXT_shader_texture_lod
   8. EXT_texture_filter_anisotropic
   9. OES_element_index_uint
   10. OES_standard_derivatives
   11. OES_texture_float
   12. OES_texture_float_linear
   13. OES_texture_half_float
   14. OES_texture_half_float_linear
   15. OES_vertex_array_object
   16. WEBGL_color_buffer_float
   17. WEBGL_compressed_texture_atc
   18. WEBGL_compressed_texture_etc1
   19. WEBGL_compressed_texture_pvrtc
   20. WEBGL_compressed_texture_s3tc
   21. WEBGL_compressed_texture_s3tc_srgb
   22. WEBGL_debug_renderer_info
   23. WEBGL_debug_shaders
   24. WEBGL_depth_texture
   25. WEBGL_draw_buffers
   26. WEBGL_lose_context
   27. WebGL2RenderingContext
   28. WebGLActiveInfo
   29. WebGLBuffer
   30. WebGLContextEvent
   31. WebGLFramebuffer
   32. WebGLObject
   33. WebGLProgram
   34. WebGLQuery
   35. WebGLRenderbuffer
   36. WebGLSampler
   37. WebGLShader
   38. WebGLShaderPrecisionFormat
   39. WebGLSync
   40. WebGLTexture
   41. WebGLTransformFeedback
   42. WebGLUniformLocation
   43. WebGLVertexArrayObject