サイト内検索

createLinearGradient() メソッド

構文

gradient = context . createLinearGradient(x0, y0, x1, y1)

引数で表される座標から得られる直線に沿って描く線形グラデーションを表す CanvasGradient オブジェクトを返します。

引数にひとつでも有限数値でないものがあれば、NOT_SUPPORTED_ERR 例外を投げます。

仕様

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

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

createLinearGradient(x0, y0, x1, y1) メソッドは 4 つの引数が必要です。(x0, y0) はグラデーションの始点、(x1, y1) は終点を表します。createLinearGradient() の引数に無限大や NaN がひとつでもあれば、NOT_SUPPORTED_ERR 例外を発生させなければいけません。そうでなければ、このメソッドは、指定の直線で初期化された線形の CanvasGradient オブジェクトを返さなければいけません。

線形グラデーションは、開始点と終了点を交差する直線に対して垂直な直線上のすべての地点は、これら 2 つの直線が交わる地点における色となるように、レンダリングされなければいけません（前述の内挿と外挿から得られる色を使います）。線形グラデーションにおける地点は、レンダリングの際に、現在の変形マトリックスによって指定されたとおりに変形されなければいけません。

x0 = x1 かつ y0 = y1 の場合は、線形グラデーションは何も描画してはいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-createlineargradient

サンプル

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

ブラウザ対応状況

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 ○