Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/CanvasRenderingContext2D/createRadialGradient below:

CanvasRenderingContext2D: createRadialGradient() メソッド - Web API

Baseline Widely available

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

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

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

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 コンテキストに割り当てられ、塗りつぶされた長方形にレンダリングされます。

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

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);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4