CanvasGradient：addColorStop() 方法
注意：此功能在 Web Workers 中可用。
CanvasGradient.addColorStop() 方法为给定的画布渐变添加一个由 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);
结果
规范
| 规范 |
|---|
| HTML # dom-canvasgradient-addcolorstop-dev |
浏览器兼容性
加载中…