HTML Canvas グラデーション

❮ 前章へ次章へ ❯

Canvas - グラデーション

createLinearGradient（）の使用

グラデーションは、矩形、円、線、テキストなどを塗りつぶすために使用できます。キャンバス上の図形は単色に限定されません。

グラデーションには 2 種類あります：

createLinearGradient(x,y,x1,y1) - 線形グラデーションを作成
createRadialGradient(x,y,r,x1,y1,r1) - 放射状/円形のグラデーションを作成

グラデーションオブジェクトを作成したら、2 つ以上のカラーストップを追加しなければなりません。

addColorStop() メソッドは、カラーストップとそのグラデーションに沿った位置を指定します。グラデーションの位置は、0 〜 1の間の任意の値にすることができます。

グラデーションを使用するには、fillStyle または strokeStyle プロパティにグラデーションを設定し、形状（矩形、テキスト、または線）を描画します。

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

Try it Yourself »

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

Try it Yourself »

❮ 前章へ次章へ ❯