CanvasGradient
.addColorStop()
method adds a new color stop, defined by an
offset
和
color
, to a given canvas gradient.
void gradient.addColorStop(offset, color);
offset
0
and
1
, inclusive, representing the position of the color stop.
0
represents the start of the gradient and
1
represents the end; an
INDEX_SIZE_ERR
is raised if the number is outside that range.
color
<color>
value representing the color of the stop. A
SYNTAX_ERR
is raised if the value cannot be parsed as a CSS
<color>
值。
此范例使用
addColorStop
method to add stops to a linear
CanvasGradient
object. The gradient is then used to fill a rectangle.
<canvas id="canvas"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(.7, 'white');
gradient.addColorStop(1, 'pink');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'CanvasGradient.addColorStop' in that specification. |
实时标准 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
addColorStop
|
Chrome Yes | Edge 12 | Firefox 3.6 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
完整支持
CanvasGradient
CanvasRenderingContext2D.createLinearGradient()
CanvasRenderingContext2D.createRadialGradient()
CanvasGradient
addColorStop()