例
勾配の定義(left to right) 、矩形の塗りつぶしスタイルとして、黒から白に行きます：
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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
createLinearGradient()メソッドは、線形勾配オブジェクトを作成します。
勾配は長方形、円、線、テキスト、等を充填するために使用することができます
Tip:の値としてこのオブジェクトを使用しstrokeStyleかのfillStyleプロパティ。
Tip:を使用addColorStop()異なる色を指定する方法を、どこ勾配オブジェクトの色を配置します。
| JavaScriptシンタックス： | context 。 createLinearGradient( x0,y0,x1,y1 ) ; |
|---|
パラメータ値
| パラメーター | 説明 |
|---|---|
| x0 | 勾配の開始点のx座標 |
| y0 | グラデーションの始点のy座標 |
| x1 | グラデーションの終点のx座標 |
| y1 | グラデーションの終点のy座標 |
その他の例
例
勾配の定義(top to bottom)の矩形の塗りつぶしスタイルとして：
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);
»それを自分で試してみてください <Canvasオブジェクト