CanvasRenderingContext2D: createConicGradient() メソッド

Baseline 2023

Newly available

Since April 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CanvasRenderingContext2D.createConicGradient() は Canvas 2D API のメソッドで、与えられた座標の点を回るようにグラデーションを作成します。

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

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

構文

js
createConicGradient(startAngle, x, y)

引数

startAngle

グラデーションを開始する角度をラジアン単位で指定します。この角度は中心から水平に右に向かう直線から始まり、時計回りに進みます。

x

グラデーションの中心の X 軸座標です。

y

グラデーションの中心の Y 軸座標です。

返値

CanvasGradient

扇形の CanvasGradient です。

例

長方形を扇形グラデーションで塗りつぶし

この例では createConicGradient() メソッドを用いて扇形グラデーションを初期化しています。その後、中心座標を中心とした 5 つの色経由点を作成します。最後に、グラデーションをキャンバスコンテキストに割り当て、塗りつぶされる長方形にレンダリングします。

HTML

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

JavaScript

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

// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const gradient = ctx.createConicGradient(0, 100, 100);

// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);

長方形の結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報