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
)。
异常
IndexSizeError
DOMException
-
如果
offset
不在 0 和 1 之间(包括边界),则抛出此异常。 SyntaxError
DOMException
-
如果
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 Standard # dom-canvasgradient-addcolorstop-dev |
浏览器兼容性
BCD tables only load in the browser