HTML canvas createLinearGradient() メソッド

例

矩形の塗りつぶしスタイルとして、黒から白になるグラデーション（左から右）を定義します：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
createLinearGradient()	Yes	9.0	Yes	Yes	Yes

定義と用法

createLinearGradient() メソッドは、線形グラデーションオブジェクトを作成します。

グラデーションは、矩形、円、線、テキストなどを塗りつぶすために使用することができます。

チップ: strokeStyle または fillStyle プロパティの値として、このオブジェクトを使用します。

チップ: 別な色と、どこにグラデーションオブジェクトに色を配置するかを指定するために、 addColorStop() メソッドを使用します。

JavaScript 構文：	context.createLinearGradient(x0,y0,x1,y1);

パラメータの値

パラメータ	説明
x0	グラデーションの始点の x 座標
y0	グラデーションの始点の y 座標
x1	グラデーションの終点の x 座標
y1	グラデーションの終点の y 座標

その他の例

例

矩形の塗りつぶしスタイルとしてグラデーション（上から下へ）を定義します：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Try it Yourself ❯

例

矩形の塗りつぶしスタイルとして、黒、赤、白に変化するグラデーションを定義します：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Try it Yourself ❯

HTML Canvas リファレンス