サイト内検索

createRadialGradient() メソッド

構文

gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1)

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

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

仕様

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

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

createRadialGradient(x0, y0, r0, x1, y1, r1) メソッドには 6 つの引数を与えます。最初の 3 つの引数は、中心が (x0, y0) で半径が r0 の開始円を表します。残りの3つは、中心が (x1, y1) で半径が r1 の終了円を表します。その値は、座標空間の単位となります。引数に、無限大や NaN がひとつでもあれば、NOT_SUPPORTED_ERR 例外が発生させなければいけません。r0 または r1 のいずれかが負であれば、INDEX_SIZE_ERR 例外を発生させなければいけません。そうでなければ、このメソッドは、指定の 2 つの円で初期化された円形の CanvasGradient オブジェクトを返さなければいけません。

円形グラデーションは次の手順に従ってレンダリングされなければいけません:

  1. x0 = x1 かつ y0 = y1 かつ r0 = r1 なら、円形グラデーションは何も描画されません。これらの手順を中止します。

  2. x(ω) = (x1-x0)ω + x0 とします。

    y(ω) = (y1-y0)ω + y0 とします。

    r(ω) = (r1-r0)ω + r0 とします。

    ω における色を、グラデーション上のその位置における色とします(前述の内挿と外挿から得られる色を使います)。

  3. r(ω) > 0 を満たす ω のすべての値に対して、正の無限大に限りなく近い ω の値で始め、ω が負の無限大に限りなく近くなるまで、その時の ω での色を使って、位置 (x(ω), y(ω)) で半径 r(ω) を持った円周を描きます。しかし、このグラデーションのレンダリングに対するこのステップで、前の円によって描画されていない canvas の部分のみを描画します。

実質的には、円錐と、グラデーションに接しない円錐の外側の領域(透明な黒)を生成するようなものです。この円錐は、グラデーションの生成で定義された2つの円に接し、開始円 (0.0) より前の円錐部分では最初のオフセットにおける色となり、終了円 (1.0) より後ろの円錐の部分では最後のオフセットにおける色となります。

円形グラデーションでは、レンダリングの際に、現在の変形マトリックスによって指定されている通りに変形されるという点が重要です。

グラデーションは、対応する輪郭描画と塗りつぶしの効果が要求される場所にだけ描画されます。


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

サンプル

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

ブラウザ対応状況

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 ○    

Opera 9.2 では、グラデーションの範囲外は透明になってしまい、仕様と実装が異なります。Opera 9.5からは仕様通りの実装になりました。ExplorerCanvasはグラデーションは構成されますが、期待通りの結果にはなりません。