addColorStop（）メソッドキャンバスHTML
例
矩形塗りつぶしスタイル、黒から白へのグラデーションを定義します。
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);
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);
»をお試しください
ブラウザのサポート
Internet Explorer 9の、Firefoxの、オペラ、ChromeとSafariのサポートaddColorStop（）メソッド。
注：のInternet Explorer 8およびそれ以前のバージョンでは、<キャンバス>要素をサポートしていません。
定義と使用法
addColorStop（）メソッドは、グラデーションオブジェクトの色と位置を指定します。
addColorStop（）メソッドcreateLinearGradientは（）またはcreateRadialGradientは、（）一緒に使用しました。
注：グラデーションを変更するaddColorStop（）メソッドを複数回呼び出すことができます。グラデーションオブジェクトでない場合は、この方法を使用して、勾配は表示されません。 可視勾配を得るためには、少なくとも1つの色を作成する必要があります。
| JavaScriptシンタックス： | 勾配.addColorStop（停止、色）; |
|---|
パラメータ値
| 参数 | 描述 |
|---|---|
| stop | 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 |
| color | 在stop位置显示的 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);
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);
»をお試しください
HTMLキャンバスリファレンスマニュアル