キャンバスにはどのようなグラデーションがありますか?

キャンバス内のグラデーションには、線形グラデーションと放射状グラデーションが含まれます。詳細な紹介: 1. 線形グラデーションは、2 点間の線分を通るグラデーションの方向と範囲を定義します。「Canvas」の createLinearGradient() メソッドを使用して線形グラデーション オブジェクトを作成し、「addColorStop()」メソッドを使用できます。グラデーションの色と位置 2. 放射状グラデーションは、中心点と半径などを通るグラデーションの形状と範囲を定義します。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

Canvas では、グラデーションを使用して、より豊かで多様なグラフィック効果を作成できます。グラデーションを塗りつぶしやストロークに適用して、グラフィック要素に色の変化を追加できます。 Canvas には、線形グラデーションと放射状グラデーションという 2 つの主なタイプのグラデーションがあります。

線形グラデーション:

線形グラデーションは、2 点間の線分を通るグラデーションの方向と範囲を定義します。 Canvas の createLinearGradient() メソッドを使用して線形グラデーション オブジェクトを作成し、addColorStop() メソッドを使用してグラデーションの色と位置を設定できます。

たとえば、次のコードは、赤から青の色のグラデーションで、左上隅から右下隅への線形グラデーションを作成します。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建线性渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Radial Gradient:

放射状グラデーションは、中心点と半径を通るグラデーションの形状と範囲を定義します。 Canvas の createRadialGradient() メソッドを使用して放射状グラデーション オブジェクトを作成し、addColorStop() メソッドを使用してグラデーションの色と位置を設定できます。

たとえば、次のコードは、内側の赤から外側の青への放射状グラデーションを作成します。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建径向渐变对象
var gradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

上記の基本的な線形グラデーションと放射状グラデーションに加えて、Canvas はより複雑なグラデーション フォームもサポートしています。グラデーションの繰り返しやカラーストップの透明度設定など。特定のニーズに応じて調整および組み合わせて、より多様なグラデーション効果を作成できます。

要約すると、Canvas で線形グラデーションと放射状グラデーションを使用して、グラフィック要素に色の遷移効果を追加できます。線形グラデーションでは 2 点間の線分を使用してグラデーションの方向と範囲を定義しますが、放射状グラデーションでは中心点と半径を使用してグラデーションの形状と範囲を定義します。さまざまな色と位置を設定することで、豊かで多様なグラデーション効果を作成し、グラフィックスの視覚的な魅力を高めることができます。

以上がキャンバスにはどのようなグラデーションがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。