サイト内検索

addColorStop() メソッド

構文

gradient . addColorStop(offset, color)

指定の offset におけるグラデーションに、指定の color を使ったカラー stop を追加します。0.0 はグラデーションの一方の端におけるオフセットとなり、1.0 は、もう一方の端におけるオフセットとなります。

オフセットが範囲外の場合は、INDEX_SIZE_ERR 例外を投げます。color が構文解析できなかった場合は、SYNTAX_ERR 例外を投げます。

仕様

グラデーションは、線形グラデーションと円形グラデーションの2種類が用意されており、ともに、CanvasGradientインタフェースを組み込んだオブジェクトで表されます。

グラデーションを生成したら、stop をグラデーションに沿って配置して、グラデーションに沿って色をどのように配分するかを定義します。各 stop におけるグラデーション色は、その stop に対して指定された色となります。各 stop 間における色とアルファ成分は、アルファ値を事前にかけ合わせずに、そのオフセットで使う色を特定して、RGBA空間上で線形に書き換えられます。最初の stop 以前では、その色は最初の stop の色となります。最後の stop 以降では、その色は最後の stop の色となります。stop がない場合は、グラデーションは透明な黒となります。

addColorStop(offset, color) メソッドは、CanvasGradient インタフェース上のメソッドで、グラデーションに新たな stop を追加します。offset が、0 未満、または、1 より大きかったり、無限大だったり、NaN だった場合は INDEX_SIZE_ERR 例外が発生されなければいけません。color が CSS 色として構文解析できない場合は、SYNTAX_ERR 例外が発生されなければいけません。そうでなければ、グラデーション全体からみて offset に指定されたオフセットの位置に、color を CSS <color> 値として構文解析されることによって得られる色を使って、グラデーションに新たな stop を配置しなければいけません。もし複数の stop がグラデーション上の同じオフセットに追加されたとしても、それら stop は追加された順番に配置されなければいけません。最初の stop は、グラデーション始点に一番近くとなり、それ以降の stop は、終点に向かってほんの少しずつ遠くなります。(実際には、各地点において最初と最後に追加された stop 以外は無視されるこになります。)


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-canvasgradient-addcolorstop

サンプル

線形グラデーションを指定する』をご覧ください。

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 △
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○