キャンバス - グラデーション
勾配が四角形、円、線、テキストを埋めるために使用することができ、キャンバス上等の形状は、固体の色に限定されるものではありません。
勾配の2種類があります。
- createLinearGradientは（ x,y,x1,y1 ） -線形グラデーションを作成します。
- createRadialGradient（ x,y,r,x1,y1,r1 ） -ラジアル/円形状のグラデーションを作成します
我々はグラデーションオブジェクトを取得したら、私たちは、二つ以上のカラーストップを追加する必要があります。
addColorStop()メソッドは、カラーストップ、および勾配に沿って位置を指定します。 傾斜位置はどこでも0から1の間とすることができます。
グラデーションを使用するには、形状描き、その後、グラデーションに再びfillStyleかstrokeStyleプロパティを設定する(rectangle, text, or a line) 。
使用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); »それを自分で試してみてください