1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: WebGLRenderingContext.blendFunc()
slug: Web/API/WebGLRenderingContext/blendFunc
translation_of: Web/API/WebGLRenderingContext/blendFunc
---
<div>{{APIRef("WebGL")}}</div>
<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.blendFunc()</code></strong> 方法定义了一个用于混合像素算法的函数.</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">void <var>gl</var>.blendFunc(<var>sfactor</var>, <var>dfactor</var>);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>sfactor</code></dt>
<dd> {{domxref("GLenum")}} 为源混合因子指定一个乘数. 默认值是 <code>gl.ONE</code>. 有关可能的值, 查看下面.</dd>
<dt><code>dfactor</code></dt>
<dd> {{domxref("GLenum")}} 为源目标合因子指定一个乘数. 默认值是 <code>gl.ZERO</code>. 有关可能的值, 查看下面.</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>None.</p>
<h3 id="异常">异常</h3>
<ul>
<li>如果 <code><em>sfactor</em> 或</code> <code><em>dfactor</em> </code>不是列出的可能值一直, 则抛出 <code>gl.INVALID_ENUM</code> 错误.</li>
<li>如果使用恒定的颜色和恒定的alpha值作为源和目标因子, 则抛出<code>gl.INVALID_ENUM</code> 错误.</li>
</ul>
<h2 id="常量">常量</h2>
<p>下列常数可用于 <code><em>sfactor</em></code> 和<code><em>dfactor</em></code>.</p>
<p>混合颜色的公式可以这样描述: color(RGBA) = (sourceColor * <em>sfactor</em>) + (destinationColor * <em>dfactor</em>). RBGA 值在 0 到1 之间.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Constant</th>
<th scope="col">Factor</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>gl.ZERO</code></td>
<td>0,0,0,0</td>
<td>所有颜色乘0.</td>
</tr>
<tr>
<td><code>gl.ONE</code></td>
<td>1,1,1,1</td>
<td>所有颜色乘1.</td>
</tr>
<tr>
<td><code>gl.SRC_COLOR</code></td>
<td>R<sub>S</sub>, G<sub>S</sub>, B<sub>S</sub>, A<sub>S</sub></td>
<td>将所有颜色乘上源颜色.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_SRC_COLOR</code></td>
<td>1-R<sub>S</sub>, 1-G<sub>S</sub>, 1-B<sub>S</sub>, 1-A<sub>S</sub></td>
<td>每个源颜色所有颜色乘1 .</td>
</tr>
<tr>
<td><code>gl.DST_COLOR</code></td>
<td>R<sub>D</sub>, G<sub>D</sub>, B<sub>D</sub>, A<sub>D</sub></td>
<td>将所有颜色与目标颜色相乘.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_DST_COLOR</code></td>
<td>1-R<sub>D</sub>, 1-G<sub>D</sub>, 1-B<sub>D</sub>, 1-A<sub>D</sub></td>
<td>将所有颜色乘以1减去每个目标颜色.</td>
</tr>
<tr>
<td><code>gl.SRC_ALPHA</code></td>
<td>A<sub>S</sub>, A<sub>S</sub>, A<sub>S</sub>, A<sub>S</sub></td>
<td>将所有颜色乘以源alpha值.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_SRC_ALPHA</code></td>
<td>1-A<sub>S</sub>, 1-A<sub>S</sub>, 1-A<sub>S</sub>, 1-A<sub>S</sub></td>
<td>将所有颜色乘以1 减去源alpha值.</td>
</tr>
<tr>
<td><code>gl.DST_ALPHA</code></td>
<td>A<sub>D</sub>, A<sub>D</sub>, A<sub>D</sub>, A<sub>D</sub></td>
<td>将所有颜色与目标alpha值相乘.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_DST_ALPHA</code></td>
<td>1-A<sub>D</sub>, 1-A<sub>D</sub>, 1-A<sub>D</sub>, 1-A<sub>D</sub></td>
<td>将所有颜色乘以1减去目标alpha值.</td>
</tr>
<tr>
<td><code>gl.CONSTANT_COLOR</code></td>
<td>R<sub>C</sub>, G<sub>C</sub>, B<sub>C</sub>, A<sub>C</sub></td>
<td>将所有颜色乘以一个常数颜色.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_CONSTANT_COLOR</code></td>
<td>1-R<sub>C</sub>, 1-G<sub>C</sub>, 1-B<sub>C</sub>, 1-A<sub>C</sub></td>
<td>所有颜色乘以1减去一个常数颜色.</td>
</tr>
<tr>
<td><code>gl.CONSTANT_ALPHA</code></td>
<td>A<sub>C</sub>, A<sub>C</sub>, A<sub>C</sub>, A<sub>C</sub></td>
<td>将所有颜色乘以一个常数.</td>
</tr>
<tr>
<td><code>gl.ONE_MINUS_CONSTANT_ALPHA</code></td>
<td>1-A<sub>C</sub>, 1-A<sub>C</sub>, 1-A<sub>C</sub>, 1-A<sub>C</sub></td>
<td>所有颜色乘以1减去一个常数.</td>
</tr>
<tr>
<td><code>gl.SRC_ALPHA_SATURATE</code></td>
<td>
<p>min(A<sub>S</sub>, 1 - A<sub>D</sub>), min(A<sub>S</sub>, 1 - A<sub>D</sub>), min(A<sub>S</sub>, 1 - A<sub>D</sub>), 1</p>
</td>
<td>将RGB颜色乘以源alpha值或1减去目标alpha值中的较小值。alpha值乘以1.</td>
</tr>
</tbody>
</table>
<h2 id="示例">示例</h2>
<p>使用混合函数, 您首先必须使用参数 <code>gl.BLEND</code>来激活{{domxref("WebGLRenderingContext.enable()")}} 的混合.</p>
<pre class="brush: js">gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
</pre>
<p>要获得当前的混合函数, 查询<code>BLEND_SRC_RGB</code>, <code>BLEND_SRC_ALPHA</code>, <code>BLEND_DST_RGB</code>, 和<code>BLEND_DST_ALPHA</code> 常量中返回混合函数常量.</p>
<pre class="brush: js">gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR;
// true
</pre>
<h2 id="说明">说明</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('WebGL', "#5.14.3", "blendFunc")}}</td>
<td>{{Spec2('WebGL')}}</td>
<td>Initial definition.<br>
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.</td>
</tr>
<tr>
<td>{{SpecName('OpenGL ES 2.0', "glBlendFunc.xml", "glBlendFunc")}}</td>
<td>{{Spec2('OpenGL ES 2.0')}}</td>
<td>Man page of the OpenGL API.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("api.WebGLRenderingContext.blendFunc")}}</p>
<h2 id="另见">另见</h2>
<ul>
<li>{{domxref("WebGLRenderingContext.blendColor()")}}</li>
<li>{{domxref("WebGLRenderingContext.blendEquation()")}}</li>
</ul>
|
