【Canvas入門1】HTML5のCanvasを使って図形を描画する方法

html5から登場したcanvasタグは図形描画やアニメーションが可能になり今ではさまざまなサイトで取り入れています。

昔はアニメーションといえばflashを使うことが多かったと思いますがcanvasの登場により図形描画やアニメーションはcanvasを使うのが一般的になりました。

基本的にはhtmlのcanvas要素とjavascriptを使って図形描画やアニメーションを行います。

ではまず簡単な図形を描画してみましょう。

Canvasを使った図形描画の方法

html

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

canvasタグには幅と高さ、idの指定が可能です。

javascript

var canvas = document.getElementById('canvas');

描画するためのコンテキストオブジェクトを取得

var shape = canvas.getContext('2d');

図形の色を指定する

shape.strokeStyle = '#000';
shape.strokeRect(50, 50, 200, 200);

図形の輪郭色を指定する

strokeStyleメソッドで図形の輪郭色を指定することができます。

輪郭の四角形を描く

strokeRectメソッドを使うことで輪郭の四角形を描くことができます。

strokeRect(x, y, w, h)

それぞれ下記の値を指定します。

X：左上からのx座標
y：左上からのy座標
w：幅
h：高さ

さきほどのjavascriptをまとめると下記の記述になります。

window.onload = function() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
		var shape = canvas.getContext('2d');
		shape.strokeStyle = '#000';
		shape.strokeRect(50, 50, 200, 200);
	}
}

サンプル