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

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

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

Baseline Widely available

CanvasRenderingContext2D.createLinearGradient() は Canvas 2D API のメソッドで、指定された2つの座標を結ぶ直線に沿ってグラデーションを作成します。

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

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

createLinearGradient(x0, y0, x1, y1)

createLinearGradient() メソッドは、グラデーション線の始点と終点を定義する4つの引数を指定します。

x0

始点の X 軸座標です。

y0

始点の Y 軸座標です。

x1

終点の X 軸座標です。

y1

終点の Y 軸座標です。

指定した行で初期化された線形の CanvasGradient。

NotSupportedError DOMException

引数に有限でない値が渡された場合に発生します。

この例では createLinearGradient() メソッドを用いて線形グラデーションを初期化しています。そして、グラデーションの始めと終わりの点の間に 3 つの色経由点を作成します。最後に、グラデーションをキャンバスコンテキストに割り当て、塗りつぶされる長方形にレンダリングします。

<canvas id="canvas"></canvas>

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

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