CanvasGradient：addColorStop() 方法
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.
备注： 此特性在 Web Worker 中可用。
CanvasGradient.addColorStop() 方法为给定的 canvas 渐变添加一个由偏移值（offset）和颜色值（color）指定的色标。
语法
js
addColorStop(offset, color)
参数
返回值
无（undefined）。
异常
IndexSizeErrorDOMException-
如果
offset不在 0 和 1 之间（包括边界），则抛出此异常。 SyntaxErrorDOMException-
如果
color无法解析为 CSS<color>值，则抛出此异常。
示例
向渐变中添加色标
此示例使用 addColorStop 方法向线性 CanvasGradient 对象中添加色标。然后使用该渐变填充矩形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.7, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
结果
规范
| Specification |
|---|
| HTML # dom-canvasgradient-addcolorstop-dev |