例
長方形の塗りつぶしスタイルとして、黒から白に行く勾配を定義します。
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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
addColorStop()メソッドは、勾配オブジェクトの色と位置を特定します。
addColorStop()メソッドは、一緒に使用されcreateLinearGradient()またはcreateRadialGradient()
Note:あなたが呼び出すことができますaddColorStop()の勾配を変更する方法を複数回。 あなたはグラデーションオブジェクトに対して、この方法を省略した場合、勾配は表示されません。 あなたは目に見える勾配を持つように少なくとも1つのカラーストップを作成する必要があります。
| JavaScriptシンタックス： | gradient 。 addColorStop( stop , color ) 。 |
|---|
パラメータ値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| stop | 勾配の開始と終了の間の位置を表し、0.0と1.0の間の値 | それを再生します» |
| color | CSSカラー値で表示するようにstop位置 | それを再生します» |
その他の例
例
複数の勾配定義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);
»それを自分で試してみてください