CanvasRenderingContext2D: createRadialGradient() メソッド

CanvasRenderingContext2D.createRadialGradient() はキャンバス 2D API のメソッドで、2 つの円のサイズと座標を使って放射グラデーションを作成します。

このメソッドは CanvasGradient を返します。シェイプに適用するには、グラデーションをまず fillStyle または strokeStyle プロパティに割り当てる必要があります。

メモ: グラデーション座標はグローバル、つまり現在の座標空間からの相対座標です。シェイプに適用された場合、座標はシェイプの座標に対する相対的なものではありません。

構文

js
createRadialGradient(x0, y0, r0, x1, y1, r1)

createRadialGradient() メソッドは、グラデーションの開始円を定義する 3 つの引数と、終了円を定義する 3 つの引数の合計 6 つの引数で指定します。

引数

x0

開始円の X 座標です。

y0

開始円の Y 座標です。

r0

開始円の半径です。負ではない有限数でなければなりません。

x1

終了円の X 座標です。

y1

終了円の Y 座標です。

r1

終了円の半径です。負ではない有限数でなければなりません。

返値

2 つの指定された円で初期化された放射 CanvasGradient です。

例外

NotSupportedError DOMException

引数に無限数が渡された場合に発生します。

IndexSizeError DOMException

引数に負の半径が渡された場合に発生します。

放射グラデーションで矩形を塗りつぶす

この例では createRadialGradient() メソッドを用いて放射グラデーションを初期化しています。その後、グラデーションの 2 つの円の間に 3 つの色経由点が作成されます。最後に、グラデーションは canvas コンテキストに割り当てられ、塗りつぶされた長方形にレンダリングされます。

HTML

html
<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 放射グラデーションを作成
// 内側の円は x=110, y=90 で radius=30
// 外側の円は x=100, y=100 で radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// 3 つの色経由点を追加
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// 塗りつぶしスタイルを設定し、長方形を描画
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

結果

仕様書

Specification
HTML Standard
# dom-context-2d-createradialgradient-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報