HTMLキャンバスグラデーション
キャンバス-グラデーション
グラデーションは、長方形、円、線、テキストなどを塗りつぶすために使用できます。キャンバス上の形状は、単色に限定されません。
グラデーションには2つの異なるタイプがあります。
- createLinearGradient（x、y、x1、y1）-線形グラデーションを作成します
- createRadialGradient（x、y、r、x1、y1、r1）-放射状/円形のグラデーションを作成します
グラデーションオブジェクトを作成したら、2つ以上のカラーストップを追加する必要があります。
addColorStop（）メソッドは、カラーストップと、グラデーションに沿ったその位置を指定します。グラデーションの位置は、0から1の間のどこでもかまいません。
グラデーションを使用するには、fillStyleまたはstrokeStyleプロパティをgradientに設定してから、図形（長方形、テキスト、または線）を描画します。
createLinearGradient（）の使用
例
線形グラデーションを作成します。長方形をグラデーションで塗りつぶします。
JavaScript：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
createRadialGradient（）の使用：
例
放射状/円形のグラデーションを作成します。長方形をグラデーションで塗りつぶします。
JavaScript：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);