WebGLRenderingContext: blendFunc() method
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.
Note: This feature is available in Web Workers.
Phương thức WebGLRenderingContext.blendFunc() của WebGL API xác định hàm nào được sử dụng để trộn số học pixel.
Cú pháp
blendFunc(sfactor, dfactor)
Thông số
Giá trị trả về
Không có (undefined).
Ngoại lệ
- Nếu sfactor hoặc dfactor không phải là một trong các giá trị có thể được liệt kê, thì
Lỗi
gl.INVALID_ENUMđược đưa ra. - Nếu một màu không đổi và một giá trị alpha không đổi được sử dụng cùng nhau làm nguồn và
các yếu tố đích, lỗi
gl.INVALID_ENUMsẽ được đưa ra.
Hằng số
Các hằng số sau đây có thể được sử dụng cho sfactor và dfactor.
Công thức pha trộn màu có thể được mô tả như sau: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). Các giá trị RGBA nằm trong khoảng từ 0 đến 1.
Trong bảng sau, RS, GS, BS, AS đại diện tương ứng cho thành phần red, green, blue và alpha của nguồn, trong khi RD, GD, BD, AD đại diện tương ứng cho thành phần red, green, blue và alpha của đích đến. Tương tự, RC, GC, BC, AC đại diện tương ứng cho thành phần red, green, blue và alpha của một hằng số màu sắc. Chúng bao gồm tất cả các giá trị từ 0 đến 1.
gl.DST_ALPHA| Không đổi | Yếu tố | Mô tả |
|---|---|---|
gl.ZERO | 0,0,0,0 | Nhân tất cả các màu với 0. |
gl.ONE | 1,1,1,1 | Nhân tất cả các màu với 1. |
gl.SRC_COLOR | RS, GS, BS, AS | Nhân tất cả các màu với màu nguồn. |
gl.ONE_MINUS_SRC_COLOR | 1-RS, 1-GS, 1-BS, 1-AS | Nhân tất cả các màu với 1 trừ mỗi màu nguồn. |
gl.DST_COLOR | RD, GD, BD, AD | Nhân tất cả các màu với màu đích. |
gl.ONE_MINUS_DST_COLOR | 1-RD, 1-GD, 1-BD, 1-AD | Nhân tất cả các màu với 1 trừ đi mỗi màu đích. |
gl.SRC_ALPHA | AS, AS, AS, AS | Nhân tất cả các màu với giá trị alpha nguồn. |
gl.ONE_MINUS_SRC_ALPHA | 1-AS, 1-AS, 1-AS, 1-AS | Nhân tất cả các màu với 1 trừ nguồn giá trị alpha. |
| AD, AD, AD, AD | Nhân tất cả các màu với giá trị alpha đích. | |
gl.ONE_MINUS_DST_ALPHA | 1-AD, 1-AD, 1-AD, 1-AD | Nhân tất cả các màu với 1 trừ đi đích đến giá trị alpha. |
gl.CONSTANT_COLOR | RC, GC, BC, AC | Nhân tất cả các màu với một màu không đổi. |
gl.ONE_MINUS_CONSTANT_COLOR | 1-RC, 1-GC, 1-BC, 1-AC | Nhân tất cả các màu với 1 trừ một hằng số color. |
gl.CONSTANT_ALPHA | AC, AC, AC, AC | Nhân tất cả các màu với một giá trị alpha không đổi. |
gl.ONE_MINUS_CONSTANT_ALPHA | 1-AC, 1-AC, 1-AC, 1-AC | Nhân tất cả các màu với 1 trừ một hằng số giá trị alpha. |
gl.SRC_ALPHA_SATURATE | min(AS, 1 - AD), min(AS, 1 – AD), min(AS, 1 - AD), 1 | Nhân màu RGB với giá trị nhỏ hơn của giá trị alpha nguồn hoặc giá trị 1 trừ giá trị alpha đích. Giá trị alpha được nhân với 1. |
Ví dụ
Để sử dụng chức năng hoà trộn, trước tiên bạn phải kích hoạt hoà trộn bằng WebGLRenderingContext.enable() với đối số gl.BLEND.
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
Để có được hàm hòa trộn hiện tại, hãy truy vấn các hằng số BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, và BLEND_DST_ALPHA để trả về một trong các hằng số của hàm hòa trộn.
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| WebGL Specification # 5.14.3 |