例
矩形の塗りつぶしスタイルとして、黒から白に行く勾配を定義します。
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); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| addColorStop() | はい | 9.0 | はい | はい | はい |
定義と使用法
addColorStop()メソッドは、グラデーションオブジェクトの色と位置を指定します。
addColorStop()メソッドは、一緒に使用されるcreateLinearGradient()またはcreateRadialGradient()
注意：あなたが呼び出すことができますaddColorStop()の勾配を変更する方法を複数回。あなたはグラデーションオブジェクトに対してこのメソッドを省略した場合、勾配は表示されません。 あなたが目に見える勾配を有するように少なくとも1つの色ストップを作成する必要があります。
| JavaScriptシンタックス： | gradient.addColorStop(stop,color); |
|---|
パラメーター値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| stop | 勾配に開始と終了の間の位置を表し、0.0と1.0の間の値 | それを再生します» |
| color | CSSカラー値 停止位置に表示します | それを再生します» |
その他の例
例
複数でグラデーションを定義addColorStop()メソッド：
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
»それを自分で試してみてください