サイト内検索

色を指定する

このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。

色を指定する

Canvasでは、描く図形の色は、デフォルトでは黒となります。黒以外の色を指定する場合は、描画する前に次のプロパティに色情報を指定します。

ctx.strokeStyle = color
図形の枠線の色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。
ctx.fillStyle = color
図形を塗りつぶす色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。

それぞれのメソッドの具体的な使い方を見てみましょう。

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* 円 #1 */
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #2 */
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #3 */
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

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

fillStyle

実際に描画される前にfillStylestrokeStyleプロパティに色を指定することで、該当の図形に色がセットされます。

半透明度を指定する(rgbaフォーマットによる色指定)

fillStylestrokeStyleプロパティは、CSSの色指定フォーマットと同じですので、rgbaフォーマットでアルファ(透明度)を指定することも可能です。では次に、3つの円を半透明にしてみましょう。

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* 円 #1 */
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; // 赤
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #2 */
ctx.beginPath();
ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; // 緑
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #3 */
ctx.beginPath();
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

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

fillStyleで半透明

ただ単に、fillStyleプロパティに与える色情報をrgbaフォーマットに変更しただけです。rgbaの4番目の引数に半透明度を指定します。半透明度は0から1までの間の数字を指定します。0は完全な透明を表し、1は一切の透明化を行わない状態を表します。

半透明度を指定する(globalAlphaプロパティ)

描いた図形に半透明度を与えるために、globalAlphaプロパティを使う方法があります。

ctx.globalAlpha = alpha
Canvas上で合成される前に図形や画像に適用するためのアルファ値をセットします。アルファ値は、0.0(完全に透明)から1.0(透明度なし)の範囲で指定しなければいけません。もしこの範囲外の値をセットすると無視され、元の値が適用されます。ただしExplorerCanvas ver.0002(Internet Explorer)の場合は、その限りではありません。コンテキストが生成された時には、globalAlphaプロパティの値は1.0で初期化されます。

先ほどと同じサンプルコードを、globalAlphaメソッドで置き換えると、次のようになります。

onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* 半透明度を指定 */
ctx.globalAlpha = 0.7;
/* 円 #1 */
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #2 */
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
/* 円 #3 */
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}

この結果は、先ほどのサンプルと全く同じように、下図のようになります。[実際のサンプルを見る]

globalAlphaで半透明

globalAlphaプロパティは、2Dコンテキストのプロパティとして規定されていますので、一度セットすると、すべての図形に適用されます。今回のサンプルのように、描く図形すべてに同じアルファ値をセットする場合は、このようにコードが1行で済みます。もし図形ごと個別にアルファ値を適用したい場合は、個々の図形を描画する直前に、都度、globalAlphaプロパティに値をセットします。しかし、個々の図形に色を指定するのであれば、先ほどのサンプルのように、fillStyleプロパティにrgbaフォーマットを指定する方がコードが少なくて済みます。状況に応じて、使い分けるのが良いでしょう。

次のコーナーでは、描く図形にグラデーションを指定する方法を紹介します。>>グラデーションを指定する