サイト内検索

線形グラデーションを指定する

このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法を紹介します。グラデーションの処理に関しては、ブラウザごとに若干の違いがあります。このコーナーではブラウザごとの特徴についても触れていきます。

線形グラデーションとは

線形グラデーションとは、開始地点の色から徐々に終了地点の色に直線的に色を変化表示する効果を表します。そのため、開始地点の色と終了地点の色と座標を事前に指定しなければいけません。Canvasの仕様では、開始と終了の2地点だけでなく、その途中の地点にも色を指定することも可能です。いくつもの色を波打つようにグラデーション効果を作ることも可能です。

線形グラデーションを実現するには、2DコンテキストのcreateLinearGradientメソッドと、createLinearGradientメソッドから得られるCanvasGradientオブジェクトのaddColorStopメソッドを使います。

CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1)
グラデーションの開始地点(x0, y0)と終了地点(x1, y1)をセットすると、その直線で初期化された線形のCanvasGradientオブジェクトを返します。
線形グラデーションは、Canvas上の開始以前の地点でoffsetが0の色が使われ、終了以降の地点でoffsetが1の色が使われます。そして、開始地点と終了地点を結ぶ直線に直角の直線上のすべての地点の色は、その2直線が交差する地点での色となります。
x0 = x1 かつ y0 = y1 の場合は、線形グラデーションは作用しません。
CanvasGradient.addColorStop(offset, color)
このメソッドは、CanvasGradientオブジェクトのメソッドで、グラデーション終点を追加します。もしoffsetが0未満または1より大きい値であれば、INDEX_SIZE_ERR例外が発生します。もしcolorがCSS色として構文解析できない場合は、SYNTAX_ERR例外が発生します。そうでなければ、colorをCSS色として構文解析して得られた色を使って、グラデーション全体から見たoffsetの地点で、新たな終点セットします。

線形グラデーションを指定するには、まずcreateLinearGradientメソッドを使ってグラデーション効果を表したい直線の開始地点と終了地点を定義します。そしてcreateLinearGradientメソッドから得られるCanvasGradientオブジェクトに組み込まれたaddColorStopメソッドを使って、グラデーション終点のオフセットと、その地点の色をセットします。最後にCanvasGradientオブジェクトをfillStyleプロパティにセットします。もし図形の枠線にグラデーションをセットしたい場合は、CanvasGradientオブジェクトをstrokeStyleプロパティにセットします。

縦向きの線形グラデーション

ではそれぞれのメソッドの具体的な使い方を見てみましょう。まず縦向きの線形グラデーションから見ていきましょう。

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* グラデーション領域をセット */
var grad = ctx.createLinearGradient(0,0, 0,140);
/* グラデーション終点のオフセットと色をセット */
grad.addColorStop(0,'rgb(192, 80, 77)'); // 赤
grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 緑
grad.addColorStop(1,'rgb(128, 100, 162)'); // 紫
/* グラデーションをfillStyleプロパティにセット */
ctx.fillStyle = grad;
/* 矩形を描画 */
ctx.rect(0,0, 140,140);
ctx.fill();
}

この結果は、下図のようになります。[実際のサンプルを見る]

線形グラデーション(縦)Firefox 2.0の場合

このサンプルは、グラデーションラインを垂直に定義しています。そして、グラデーション終点を3つ定義し、それぞれの終点の色を、赤、緑、紫にセットしてあります。左図は、Firefox 2.0の結果ですが、Opera 9やSafari 2.0やInternet Explorer(ExplorerCanvas Release 3)でも同じ結果が得られます。

なお、矩形を描画したいだけであれば、fillRectメソッドが便利なのですが、あえて、このサンプルではrectメソッドとfillメソッドを使っています。実は、Safari 2.0の場合、fillRectメソッドで描画される図形にはグラデーションが効かないという問題があります、デフォルト色(何も色を指定していなければ黒)で塗りつぶされた矩形が描画されてしまいます。矩形にグラデーションをかける場合には、注意してください。

横向きの線形グラデーション

これまで縦向きの線形グラデーションを見てきましたが、今度は横向きの線形グラでションを見てみましょう。先ほどのサンプルコードのうち、createLinearGradientメソッドの部分を次のように書き換えます。

var grad  = ctx.createLinearGradient(0,0, 140,0);

このサンプルをFirefox 2.0で見ると、下図のようになります。[実際のサンプルを見る]

線形グラデーション(横)Firefox 2.0の場合

これは期待通りの結果です。Opera 9やSafari 2.0やInternet Explorer(ExplorerCanvas Release 3)でも同様の結果が得られます。

斜め向きの線形グラデーション

今度は斜め向きの線形グラでションを見てみましょう。先ほどのサンプルコードのうち、createLinearGradientメソッドの部分を次のように書き換えます。

var grad  = ctx.createLinearGradient(0,0, 140,140);

このサンプルをFirefox 2.0で見ると、下図のようになります。[実際のサンプルを見る]

線形グラデーション(斜め)Firefox 2.0の場合

これは期待通りの結果です。Opera 9やSafari 2.0やInternet Explorer(ExplorerCanvas Release 3)でも同様の結果が得られます。

次のコーナーでは、円形グラデーションの使い方を紹介します。>>円形グラデーション指定する