サイト内検索

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

線形グラデーションに続き、今度は円形グラデーションです。線形グラデーション以上にブラウザの互換性がないため、使いづらい点はありますが、ビジュアル重視のCanvasを作りたいのであれば、知っておきたい知識です。

円形グラデーションとは

円形グラデーションとは、同心円上に広がって色が徐々に変化ひゅうじする効果を表します。円形グラデーションも、線形グラデーションでは、グラデーションラインの開始地点と終了地点を指定しましたが、円形グラデーションでは、グラデーションの開始と終了を表す円の座標と半径を指定します。

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

CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
中心座標が (x0, y0) で半径 r0 の円と、中心座標が (x1, y1) で半径 r1 の円を指定すると、その2つ円で初期化された円形のCanvasGradientオブジェクトを返します。もし r0 または r1 に負の値が指定されると、INDEX_SIZE_ERR例外が発生します。もし x0 = x1 かつ y0 = y1 かつ r0 = r1 なら、円形グラデーションは何も作用しません。

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

ドーナツ型の線形グラデーション

ではそれぞれのメソッドの具体的な使い方を見てみましょう。ここでは、円形グラデーションの特性が最も分かりやすいドーナツ型のグラデーションを作ってみます。

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.createRadialGradient(70,70,20,70,70,70);
/* グラデーション終点のオフセットと色をセット */
grad.addColorStop(0,'red'); // 赤
grad.addColorStop(0.5,'yellow'); // 黄
grad.addColorStop(1,'blue'); // 青
/* グラデーションをfillStyleプロパティにセット */
ctx.fillStyle = grad;
/* 矩形を描画 */
ctx.rect(0,0, 140,140);
ctx.fill();
}

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

円形グラデーション Firefox 2.0の場合

左図は、このサンプルをFirefox 2.0で表示した結果をキャプチャーしたものです。このサンプルは、半径20の円に始まり、半径70の円で終わる円形グラデーションを定義しています。この2つの円はともに同じ中心を持ちますので、ドーナツ状のグラデーションとなります。グラデーション終点として、内側の円(赤色)、中間のポイント(黄色)、外側の円(青色)の3つをaddColorStopメソッドで定義しました。

このグラデーションをセットした状態で矩形を描くと、矩形内に同心円上のグラデーションが現れます。グラデーションはドーナツ状になっているはずですが、ドーナツの中に相当する部分と、ドーナツの外に相当する部分にも、グラデーションの開始点(内側の円)と終了点(外側の円)の色で塗りつぶされている点に注意いてください。2007/08/13現在におけるW3C HTML5 および WAHTWG HTML5 の最新のドラフトでは、そう規定されています。ただ、現実的には、グラデーションの範囲外の色の扱い方についてはブラウザによって異なっています。2007/08/13現在で、このドラフトの仕様に準じているブラウザは、FirefoxとSafariのみです。

ブラウザごとの相違

先ほどのドーナツ型の円形グラデーションをFirefox 2.0で表示した結果を見てきましたが、他のブラウザでの表示結果も見てみましょう。なお、Safariは、Firefox 2.0と同じ結果となりますので、割愛します。

Internet Explorer (ExplorerCanvas Release 3)の場合

円形グラデーション Internet Explorerの場合

ExplorerCanvas では、円形グラデーションは完全にサポートされていません。この図のように、円形のグラデーションにはなりません。

Opera 9.22の場合

円形グラデーション Opera 9.22の場合

Opera 9.2 では、グラデーション範囲外の色の扱いが異なります。グラデーションの範囲外は透明となり、何も表示されず、仕様と実装が異なっています。しかし、Opera 9.5 では修正され、期待通りの円形グラデーションを描くことができるようになっています。

次のコーナーでは、Canvas内に画像の組み込み表示する方法を紹介します。>>画像を組み込む