トップページ >  HTML5 >  canvas要素(2) 色とスタイル
初版2011/07/11: 最終更新日2011/07/11
canvas要素(2) 色とスタイル
目次
色を指定する
半透明度を指定する
線のスタイルを指定する
影を指定する
色を指定する

<canvas>要素の線色のデフォルトは、黒となります。
また塗りつぶし色のデフォルトも、黒となります。

※<canvas>要素に対応しません。

描画する前に次のプロパティに色情報を指定します。

strokeStyle = color
線色を指定します。
fillStyle = color
塗りつぶし色を指定します。

colorに指定する色はCSSで指定するフォーマットに対応しています。
例えば
"orange"、"#ff0000"や"rgb(192, 80, 77)"などです。

リスト1. 色の指定

// 色名で指定。線色=赤 / 塗りつぶし=緑
context.strokeStyle = 'red';
context.fillStyle = 'green';

// 16進で指定。線色=緑 / 塗りつぶし=青
context.strokeStyle = '#00ff00';
context.fillStyle = '#0000ff';

// 10進で指定。線色=青 / 塗りつぶし=赤
context.strokeStyle = 'rgb(00,00,255)';
context.fillStyle = 'rgb(255,00,00)';

コーディング例

※<canvas>要素に対応しません。

半透明度を指定する

<canvas>要素の塗りつぶしは、半透明度を変更することが可能です。
デフォルトは、不透明(半透明度=1)です。
透明(半透明度=0)~不透明(半透明度=1)まで設定することが出来ます。

半透明度の設定方法は、CSS3の「rgba()」を用いる方法と「globalAlpha」属性の二つの方法があります。

fillStyle = "rgba(r,g,b,a)"
CSS3の透過色の指定方法を用います。
r=赤(0~255)、g=緑(0~255)、b=青(0~255)、a=半透明度(0.0~1.0)で指定します。
fillStyle だけでなく、strokeStyleにも適用出来ます。
globalAlpha = alpha
対象コンテキストに、半透明度 alpha を指定します。
対象コンテキスト全般の半透明度を指定します。
そのため、ここの図形に色を指定するような場合は、「rgba()」を用いた方が簡便なコードとなります。

リスト2. 「rgba()」にて、半透明度を指定

// rgbaで指定。線色=赤(0.3) / 塗りつぶし=緑(0.8)
context.strokeStyle = 'rgba(255,00,00,0.3)';
context.fillStyle = 'rgba(00,255,00,0.8)';

// rgbaで指定。線色=緑(0.5) / 塗りつぶし=青(0.5)
context.strokeStyle = 'rgba(00,255,00,0.5)';
context.fillStyle = 'rgba(00,00,255,0.5)';

// rgbaで指定。線色=青(0.8) / 塗りつぶし=赤(0.3)
context.strokeStyle = 'rgba(00,00,255,0.8)';
context.fillStyle = 'rgba(255,00,00,0.3)';

コーディング例

※<canvas>要素に対応しません。

リスト3. 「globalAlpha」属性にて、半透明度を指定

// 半透明度を0.5に設定
context.globalAlpha = 0.5;
// ※細かな設定を行うには向いていません。

コーディング例

※<canvas>要素に対応しません。

重ねた時の合成方法を指定することが出来ます。
但し、合成方法と結果は、ブラウザによって異なる場合(未サポートや解釈が異なる)があります。

globalCompositeOperation = "合成方法"
図形やイメージの合成方法を指定します。
source-over : 上重ね(デフォルト)
source-atop : 下に新規は重複部のみ。
source-in : 重複部(上)のみ
source-out : 上の重複していない部分のみ
destination-atop : 上に下の重複部のみ
destination-in : 重複部(下)のみ
destination-out : 下の重複していない部分のみ
destination-over : 下重ね
lighter : 重複部は混色
copy : 上のみ
xor : 重複部以外
その他 ブラウザによりキーワードあり。
線のスタイルを指定する

<canvas>要素は、線の幅、端部及び接合部のスタイルを指定ができます。
※線種(点線など、実線以外)の指定は出来ません。

lineWidth = lw
線の幅を指定します。
指定できるのは0より大きい有限の数値のみです。
lineCap = "端部の形状"
線の端部を指定します。
形状は、butt(端部でフラット)、round(端部で丸め)、square(端部で囲み)の3種です。
デフォルトは、butt です。
lineJoin = "接合部の形状"
線の接合部を指定します。
形状は、bevel(面取り)、round(丸め)、miter(面取りしない)の3種です。
デフォルトは、miter です。
miterLimit = "比率"
lineJoin="miter"の場合、接合部の尖りの限界比率を指定します。
限界を越えた時点で、lineJoin="bevel"と同様になります。
限界点 = lineWidth × miterLimit
デフォルトは、10.0 です。

リスト4. 線の幅を指定

/* デフォルトの線幅 */
// デフォルトは、線幅=1になります。

/* 線幅 5 */
context.lineWidth = 5;		//線幅を5に設定。

/* 線幅 20 */
context.lineWidth = 20;		//線幅を20に設定。

コーディング例

※<canvas>要素に対応しません。

リスト5. 端部を指定

/* butt */
context.lineCap = "butt";	//フラットな端部(デフォルト)

/* round */
context.lineCap = "round";	//丸めた端部

/* square */
context.lineCap = "square";	//囲まれた端部

コーディング例

※<canvas>要素に対応しません。

リスト6. 接合部を指定

	/* miter */
	context.lineJoin = "miter";	//面取りのない接合部(デフォルト)

	/* bevel */
	context.lineJoin = "bevel";	//面取りした接合部

	/* round */
	context.lineJoin = "round";	//丸めた接合部

コーディング例

※<canvas>要素に対応しません。

リスト7. 接合部の限界を指定

	/* デフォルト */

	/* miterLimit = 2; */
	context.miterLimit = 2;		//比率 = 2 を指定。

	/* miterLimit = 5; */
	context.miterLimit = 5;		//比率 = 5 を指定。

コーディング例

※<canvas>要素に対応しません。

影を指定する

<canvas>要素は、図形に影を指定ができます。

shadowColor = color
影の色を指定します。
shadowOffsetX = x
影の水平方向のオフセット距離を指定します。
shadowOffsetY = y
影の垂直方向のオフセット距離を指定します。
shadowBlur = level
影のぼかし効果のレベルを指定します。
0以上の数値で指定します。

リスト8. 影を指定

/* 線に影 */
context.shadowColor = "gray";		//影の色は銀色
context.shadowOffsetX = 5;			//水平 5
context.shadowOffsetY = 5;			//垂直 5
context.shadowBlur = 0;				//ぶれ 0
context.lineWidth = 20;				//線幅を20に設定。
context.lineCap = "round";			//丸めた端部
context.beginPath();				//書き始めます。
context.moveTo(20, 20);				//x=20、y=20の位置に移動。
context.lineTo(430, 20);			//x=430、y=20の位置に線引き。
context.stroke();					//線を描く。

/* 四角に影 */
context.strokeStyle = 'green';		//色は緑
context.shadowColor = "blue";		//影の色は青
context.shadowOffsetX = 10;			//水平 10
context.shadowOffsetY = 0;			//垂直 0
context.shadowBlur = 5;				//ぶれ 5
context.lineJoin = "round";			//丸めた接合部
context.strokeRect(50,50,100,100);	//四角を描く。

/* 円に影 */
context.fillStyle = 'yellow';		//色は黄色
context.shadowColor = "red";		//影の色は赤
context.shadowOffsetX = 0;			//水平 3
context.shadowOffsetY = 0;			//垂直 3
context.shadowBlur = 20;			//ぶれ 20
context.beginPath();				//書き始めます。
context.arc(300, 100, 50, 0, Math.PI*2, false);	//円を描く
context.fill();						//塗りつぶす。

コーディング例

※<canvas>要素に対応しません。