CanvasRenderingContext2D: createLinearGradient() メソッド
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.
CanvasRenderingContext2D.createLinearGradient()
は Canvas 2D API のメソッドで、指定された2つの座標を結ぶ直線に沿ってグラデーションを作成します。
このメソッドは、線形の CanvasGradient
を返します。図形に適用するには、グラデーションを最初の fillStyle
または strokeStyle
プロパティに割り当てる必要があります。
メモ: グラデーション座標はグローバル、 すなわち現在の座標空間に対する相対座標です。図形に適用される場合、座標は図形の座標に対する相対ではありません。
構文
createLinearGradient(x0, y0, x1, y1)
createLinearGradient()
メソッドは、グラデーション線の始点と終点を定義する4つの引数を指定します。
引数
返値
指定した行で初期化された線形の CanvasGradient
。
例外
NotSupportedError
DOMException
-
引数に有限でない値が渡された場合に発生します。
例
線形グラデーションによる長方形の塗りつぶし
この例では createLinearGradient()
メソッドを用いて線形グラデーションを初期化しています。そして、グラデーションの始めと終わりの点の間に 3 つの色経由点を作成します。最後に、グラデーションをキャンバスコンテキストに割り当て、塗りつぶされる長方形にレンダリングします。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = ctx.createLinearGradient(20, 0, 220, 0);
// Add three color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-createlineargradient-dev |
ブラウザーの互換性
BCD tables only load in the browser