例
矩形の塗りつぶしスタイルとして、黒から白に行く（左から右）の勾配を定義します。
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); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| createLinearGradient() | はい | 9.0 | はい | はい | はい |
定義と使用法
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);
»それを自分で試してみてください 例
矩形の塗りつぶしスタイルとして、白、赤に、黒から行く勾配を定義します。
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);
»それを自分で試してみてください