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
# dom-context-2d-createconicgradient-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createConicGradient

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報