canvasを使って図形を描画する

2015.08.09

canvasの図形描画を色々試してみました。

処理記述前の準備

canvasを記述していくための準備です。

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

window.onload = function() {
	draw();
}
function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	// ここに描画処理を記述
}
getContext(‘2d’); canvasに描画していくための機能を有効にする。

　

四角形の描画

四角形を描画する場合は主にstrokeRect()かfillRect()を使用します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.strokeStyle = '#ff0000';
	ctx.strokeRect(10, 10, 100, 100);

	ctx.fillStyle = '#0000ff';
	ctx.fillRect(150, 10, 100, 100);
	ctx.clearRect(170, 30, 40, 40);
}
strokeRect(X, Y, width, height); 枠線でくりぬかれた四角形を描画。
X,Yが四角形の左上の座標、widthとheightが四角形のサイズを指定。
fillRect(X, Y, width, height); 塗りつぶした四角形を描画。
X,Yが四角形の左上の座標、widthとheightが四角形のサイズを指定。
clearRect(X, Y, width, height); 指定したエリアを削除。
X,Yが四角形の左上の座標、widthとheightが四角形のサイズを指定。
strokeStyle = color; 線の色を指定。
fillStyle = color; 塗りの色を指定。

四角形の描画のデモページ
　

パスの描画

パスを描画する場合、beginPath()でパスの記述開始を宣言して、moveTo()で開始座標を指定、lineTo()でパスを描画していきます。
パスの描画が終わったら今回はfill()でパスの中を塗りつぶします。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.moveTo(50, 50);
	ctx.lineTo(100, 50);
	ctx.arcTo(150, 150, 50, 100, 10);
	ctx.lineTo(50, 100);
	ctx.fill();
}
beginPath(); パスの記述を始める宣言。
moveTo(X, Y); 座標をX,Yの位置に移動。
lineTo(X, Y); 現在の座標からX,Yに向けてパスを描画。
arcTo(X1, Y1, X2, Y2, r); 現在の座標からX1,Y1に向けてパスを描画して、そこからX2,Y2へ向かうように半径rの円弧を描画。
fill(); パスを塗りつぶして描画。

線の描画のデモページ1
　

上記ではパスの中を塗りつぶしましたが、今度はstroke()でパスの線を描画してみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.moveTo(50, 50);
	ctx.lineTo(100, 50);
	ctx.arcTo(150, 150, 50, 100, 10);
	ctx.lineTo(50, 100);
	ctx.stroke();
}
stroke(); パスの線を描画。

線の描画のデモページ2
　

パスの線を描画する際、太さや角部分の描画をどうするかなどの指定も行えます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.lineWidth = 10;
	ctx.lineCap = 'round'; // butt round square
	ctx.moveTo(50, 50);
	ctx.lineTo(100, 50);
	ctx.arcTo(150, 150, 50, 100, 10);
	ctx.lineTo(50, 100);
	ctx.stroke();
}
lineWidth = num; 線を描画する際の太さを指定。
lineCap = ‘value‘; 線の端の処理を指定。
butt: パス部分で終了(初期値)
round: 角が丸くなる
square: 線幅の半分だけ伸びる

線の描画のデモページ3
　

最後にパスを自動で閉じたい場合、closePath()を使用します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.moveTo(50, 50);
	ctx.lineTo(100, 50);
	ctx.arcTo(150, 150, 50, 100, 10);
	ctx.lineTo(50, 100);
	ctx.closePath();
	ctx.stroke();
}
closePath(); 現在のパスと開始時点のパスを繋いでパスを閉じる。

線の描画のデモページ4
　

円弧の描画

円弧を描画する場合、arc()を使用します。
今回は0度から90度までの時計回りの円弧を描画してみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.arc(100, 100, 50, (0 * Math.PI / 180), (90 * Math.PI / 180), false);
	ctx.stroke();
}
arc(X, Y, r, start, end, anticlockwise) X,Y座標が中心でrが半径、startからendまでの円弧を描画。
anticlockwiseで方向(反時計回りかどうか)を指定。

円弧の描画のデモページ1
　

JavaScript

今度は0度から90度までの反時計回りの円弧を描画してみます。

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.arc(100, 100, 50, (0 * Math.PI / 180), (90 * Math.PI / 180), true);
	ctx.stroke();
}

円弧の描画のデモページ2
　

JavaScript

今度は90度から180度までの時計回りの円弧を描画してみます。

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.arc(100, 100, 50, (90 * Math.PI / 180), (180 * Math.PI / 180), false);
	ctx.stroke();
}

円弧の描画のデモページ3
　

テキストの描画

テキストを描画する場合、fillText()やstrokeText()を使用します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.font = 'bold 20px Verdana';
	ctx.textAlign = 'left';
	ctx.fillStyle = '#ff0000';
	ctx.fillText('Sample Text', 50, 50);
	ctx.fillText('Sample Text', 50, 80, 100);
	ctx.textBaseline = 'middle';
	ctx.fillText('Sample Text', 220, 50);
	ctx.strokeStyle = '#0000ff';
	ctx.strokeText('Sample Text', 50, 110);
}
font = ‘value‘; フォントのスタイルを指定。
値はCSSのfontスタイルと同じ。
textAlign = ‘value‘; 文字寄せをどうするか指定。
valueの値はleft, center, right, start, endのいずれか。
textBaseline = ‘value‘; 文字のベースラインを指定。
valueの値はtop, middle, bottom, hanging, alphabetic, ideographicのいずれか。
fillText(‘text‘, X, Y[, max-width]); X,Y座標にtextの文字を塗りつぶして描画。
max-widthがある場合はその幅内で収まるように調整される。
strokeText(‘text‘, X, Y[, max-width]); X,Y座標にtextの文字を枠線でくりぬかれた状態で描画。
max-widthがある場合はその幅内で収まるように調整される。

テキストの描画のデモページ
　

画像の描画

画像を描画する場合、drawImage()を使用します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = '01.jpg';
	img.onload = function() {
		ctx.drawImage(img, 50, 50);
	}
}
drawImage(img, X, Y); X,Y座標にimgの画像を描画。

画像の描画のデモページ
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年10月
日 月 火 水 木 金 土
 1234
567891011
12131415161718
19202122232425
262728293031