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 2015年7月.
メモ: この機能はウェブワーカー内で利用可能です。
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);
結果
仕様書
| Specification |
|---|
| HTML # dom-canvasgradient-addcolorstop-dev |