グラデーションをかける

Canvasでは線形グラデーションと円形グラデーションが規定されています。線形グラデーションとはある一方向に対して色が徐々に変化していくものです。それに対して円形グラデーションとは同心円上に色が徐々に変化していくものです。線形グラデーションでは横向き、縦向き、斜め向きいずれの向きにも対応しています。

Canvasでは、さらに2色のグラデーションだけではなく、複数の色のグラデーションをサポートしています。つまり、ある方向に対して、赤、青、黄、緑といった具合に、虹のようなグラデーションを表現することが可能です。

Canvasではかなり高度なグラデーションの表現方法が規定されていますが、残念ながらInternet Explorer（ExplorerCanvas 0002）ではグラデーションが完全にサポートされていません。Internet Explorer（ExplorerCanvas 0002）では、縦向き2色の線形グラデーションのみです。

ここでは、Internet Explorer（ExplorerCanvas 0002）で対応している範囲に限定してグラデーションを解説していきます。また、Canvasのグラデーションの詳細は、「HTML5.JP - 線形グラデーションを指定する（http://www.html5.jp/canvas/how4.html）」や「HTML5.JP - 円形グラデーションを指定する（http://www.html5.jp/canvas/how5.html）」をご覧ください。

画像をクリックすると拡大します

縦方法の線形グラデーション

Canvasで線形グラデーションを指定するには、まずcreateLinearGradientメソッドを使って、グラデーションの向きと範囲を表す直線を指定します。

createLinearGradientメソッドには4つの引数を与えますが、それぞれグラデーションの向きと範囲を表す直線の端点の座標の値を指定します。

今回の例「var grad = ctx.createLinearGradient(150, 50, 150, 250);」では、(150, 50)と(150, 250)の2点を結んだ直線を表します。

ここでは、Internet Explorer（ExplorerCanvas 0002）でも適切にグラデーションが表現できるよう、垂直となる直線を指定します。

createLinearGradientメソッドは、CanvasGradientと呼ばれるオブジェクトを返します。サンプルではgradという変数に、そのオブジェクトを格納しています。

グラデーションの向きと範囲を指定したら、次にaddColorStopメソッドを使って、CanvasGradientオブジェクトgradに対して、グラデーションの色を指定します。

addColorStopメソッドには2つの引数を与えます。1つ目には適用したい色を表すオフセット値（0～1の間）を指定します。2つ目には色を表す値を表します。オフセット値とは、createLinearGradientメソッドで指定した直線上の位置を0～1の間で表した値です。0は座標(150, 20)の位置を、1は座標(150, 250)の位置を表すことになります。

リスト5では、「grad.addColorStop(0, "yellow");」「grad.addColorStop(1, "green");」に該当します。この例では、座標(150, 20)の位置に黄色、座標(150, 250)の位置に緑色をセットしたことになります。

最後に、グラデーションの状態がセットされたgradを、fillStyleプロパティにセットすることで、グラデーションがCanvasに定義されたことになります。

そのあとに描かれる図形は、すべて、ここで定義されたグラデーションが適用されることになります。