Canvas addColorStop() メソッド
定義と使用法
addColorStop() メソッドはgradientオブジェクト内の色と位置を指定します。
addColorStop()メソッドと createLinearGradient() または createRadialGradient() 一緒に使用します。
注記：addColorStop()メソッドを複数回呼び出してグラデーションを変更できます。gradientオブジェクトに该方法を使用しない場合、グラデーションは見えません。見えるグラデーションを得るために、少なくとも1つの色標を作成する必要があります。
例
例1
黒から白へのグラデーションを定義し、矩形の塗りつぶしスタイルとして使用します：
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);
ヒント：ページの下部にさらに多くの例があります。
構文
gradient.addColorStop(stop,color);
パラメータの値
| パラメータ | 説明 |
|---|---|
| stop | 0.0と1.0の間の値で、グラデーションの中で始点と終点の位置を示します。 |
| color | 終了位置に表示されるCSSの色値。 |
さらに多くの例
例2
複数の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);
ブラウザのサポート
このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 およびそれ以前のバージョンでは <canvas> 要素をサポートしていません。
