PR

着色とアルファとグラデーション

2008年5月15日(木)
羽田野 太巳

グラデーションをかける

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に定義されたことになります。

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

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています