図形に色を付ける

前回の記事でブラウザ上で図形を描画する方法についてご紹介しました。
Canvas APIでは更に図形に対して色を付けたり、グラデーションを設定したりすることも可能です。
なお、今回ご紹介するのはJavaScriptを用いた図形の色設定ですが、図形描画に関する処理は
JavaScriptに限らずCSSでも行う事ができます。CSSを使った方法についても今後ご紹介する予定です。

詳細は続きからどうぞ。

四角形に色を付ける

前回作成した四角形に色をつけてみます。
ここで使うメソッドはfillStyleです。
具体的には以下のように使います。

<script language="javascript" type="text/javascript">
function load() {
   var canvas = document.getElementById("sample");
   var context = canvas.getContext("2d");
   context.fillStyle = "#FF0000";
   context.fillRect(20,20,200,200);
}
</script>

5行目でfillStyleメソッドを使い、四角形の背景色に赤色を設定しています。
色の指定は16進数表記以外にも色名やrgb形式による指定も可能です。
これを実際に動作させると下の図のようになります。

四角形にグラデーションを設定する

グラデーションは「線形グラデーション」と「円形グラデーション」の2種類があります。
前者の線形グラデーションは開始地点から終了地点にかけて色が徐々に変化します。
後者の円形グラデーションは同心円状に徐々に色が変わっていきます。

• 線形グラデーション

線形グラデーションはcreateLinearGradientメソッドとaddColorStopメソッドを使って設定します。

グラデーション関連メソッド1

名前	概要
createLinear(x1, y1, x2, y2)	始点(x1, y1)から終点(x2, y2)にかけてグラデーションを生成する
addColorStop(offset, color)	グラデーションの境界と色を設定。offsetは0〜1までの数値、色はCSSの形式で設定する。

createLinearGradientメソッドで線形グラデーションのオブジェクトを生成し、
生成したオブジェクトに対してaddColorStopメソッドでグラデーションの境界を設定します。
具体的には以下のような使い方をします。

<script language="javascript" type="text/javascript">
function load() {
   var canvas = document.getElementById("sample");
   var context = canvas.getContext("2d");
   var verticalGradient = context.createLinearGradient(0, 0, 0, 256);

   verticalGradient.addColorStop(0, '#000000');
   verticalGradient.addColorStop(0.2, '#0000aa');
   verticalGradient.addColorStop(0.4, '#00aaaa');
   verticalGradient.addColorStop(0.6, '#00aaaa');
   verticalGradient.addColorStop(0.8, '#00ffaa');

   context.fillStyle = verticalGradient;
   context.fillRect(0, 0, 256, 256);
}
</script>

まず、5行目でcreateLinearGradientメソッドを使って線形グラデーションのオブジェクトを生成しています。
7行目以降でグラデーションのオブジェクトに対してaddColorStopメソッドを使って
グラデーションの境界と色の変化を設定しています。
最後に13行目のfillStyleで塗り潰しの色にグラデーションを設定させればOKです。
これを実際に動作させると下の図のようになります。

• 円形グラデーション

円形グラデーションはcreateRadialGradientメソッドとaddColorStopメソッドを使って設定します。
線形グラデーションのときと同じようにcreateRadialGradientメソッドで円形グラデーションのオブジェクトを
生成し、addColorStopメソッドでグラデーションの境界と色を設定していきます。

グラデーション関連メソッド2

名前	概要
createRadialGradient(x1, y1, r1, x2, y2, r2)	中心(x1, y1)・半径r1の円と、中心(x2, y2)・半径r2の円のあいだにグラデーションを生成する。

実際には以下のようにして使います。

<script language="javascript" type="text/javascript">
function load() {
   var canvas = document.getElementById("sample");
   var context = canvas.getContext("2d");

   var radialGradient = context.createRadialGradient(128, 128, 32, 128, 128, 128);

   radialGradient.addColorStop(0, '#660000');
   radialGradient.addColorStop(0.5, '#ff0000');

   context.fillStyle = radialGradient;
   context.fillRect(0, 0, 256, 256);
}
</script>

線形グラデーションと同様に6行目でcreateRadialGradientメソッドを使って円形グラデーションのオブジェクトを生成しています。
8,9行目でaddColorStopメソッドを使ってグラデーションの境界と色の変化を設定しています。
そして11行目のfillStyleで塗り潰しの色にグラデーションを設定します。
これを実際に動作させると下の図のようになります。

以上、「図形に色を付ける」の解説でした。