html5のcanvasで簡単な図を描いてみた

Posted: 2011.05.17 / Category: HTML&CSS / Tag: HTML5

やらなくては、やらなくてはと思ってはいてもなかなか手を出せないhtml5ですが。
そろそろ本当にやらなくてはいけない状況になってきているようです。
で、html5とひとことで言ってもいろいろあるわけですが、とりあえずcanvasからはじめてみようかなと。

canvasってなに？

いまさらここでcanvasの説明をする必要はないと思いますが、Flashや画像ソフトを使用しないでhtml（javascript）だけで図などを描画するための技術です。
またアニメーションをさせたり、写真画像の加工などもできるらしいです。
ここでは簡単な図形の描画しかやりませんが……

ベースhtml

今まではxhtmlをメインで書いていましたが、html5になるとちょっと書き方が変わるらしいです。

html

 
	<!DOCTYPE html> 
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>canvas demo</title>
	</head>
	<body>
	<canvas width="500" height="500"></canvas>
	</body>
	</html>

メタ情報書いてないというのもありますが、かなりすっきりした印象ですね。

で、canvasのマークアップはこうなります。

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

canvasタグはimgタグと同じ扱いらしいので、サイズはcssで指定できなかったり単位（px）をつけなかったりします。
あとタグ自体はxhtml風でも書けるというのをどこかで見たような気がしたので、下記のような感じでもいいと思います、間違ってたらすみません。

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

四角を描く

とりあえず四角を描いてみます。
ここからはjavascriptで書いていきます。

javascript

	<script type="text/javascript">
	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		context.fillRect(120, 80, 240, 100);
	}
	</script>

4行目までがcanvasで図形を描くための準備のようなもので、5行目の「fillRect」で四角を書いています。
引数で数値を指定することで、大きさや位置を調節します。

fillRect(x, y, width, height)

こんな感じで四角い図形が描かれます。

「fillRect」は塗りつぶしですが、他にも「strokeRect」で線を描いたり、「clearRect」描画を削除（クリア）などがあります。
また、基本的には後で記述した図形ほど上に重なります。

javascript

	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		context.strokeRect(140, 100, 240, 100);
		context.fillRect(120, 80, 240, 100);
		context.clearRect(100, 60, 240, 100);
	}

図形に色を塗る

塗りつぶしも線の描画もデフォルトでは黒なので、色を付けてみましょう。

javascript

	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		context.strokeStyle = '#735E3B';	//線の色
		context.strokeRect(140, 100, 240, 100);
		context.fillStyle = '#D0A869';	//塗りつぶし色
		context.fillRect(120, 80, 240, 100);
		context.clearRect(100, 60, 240, 100);
	}

図形を透明にする

図形を透明にするにはStyleで指定していた色をrbgaにします。

javascript

	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		context.strokeStyle = 'rgba(150, 180, 90, 0.7)';	//線の色
		context.strokeRect(140, 100, 240, 100);
		context.fillStyle = 'rgba(130, 100, 160, 0.5)';	//塗りつぶし色
		context.fillRect(120, 80, 240, 100);
		context.fillStyle = 'rgba(190, 80, 70, 0.7)';	//塗りつぶし色
		context.fillRect(100, 60, 240, 100);
	}

グラデーションで塗る

最後に単色で色を付けていたものをグラデーションにしてみます。

javascript

	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		//グラデーションの設定
		var gradient = context.createLinearGradient(50, 50, 340, 50);
		gradient.addColorStop(0.0, '#5E6399');
		gradient.addColorStop(1.0, '#BA6867');
		context.fillStyle = gradient;	//塗りつぶしにグラデーションを指定
		context.fillRect(50, 50, 240, 100);
	}

グラデーションは「createLinearGradient」で方向や位置を指定します。

createLinearGradient(x0, y0, x1, y0)

x0,y0からx1,y1にかけてグラデーションを指定します。
座標は絶対座標になりますので、たとえば図形の開始位置が「50,80」ならグラデーションの「x0,y0」も「50,80」という指定にすれば図形の端点からグラデーションを開始します。

「addColorStop」はカラーと位置の指定です。
グラデーションなので最低２点は必要ですね。第一引数がそのカラーが入る位置です。
サンプルでは２点ですが、例えば(0.5, ‘#fff’)とかにすれば中心に色が追加されます。

またグラデーションは円形もできます。

javascript

	window.onload = function() {
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		//円タイプのグラデーション
		var gradientR = context.createRadialGradient(400, 175, 0, 400, 175, 80);
		gradientR.addColorStop(0.0, '#BAAD56');
		gradientR.addColorStop(1.0, '#659956');
		context.fillStyle = gradientR;	//塗りつぶしにグラデーションを指定
		context.fillRect(300, 100, 200, 150);
	}

円型も２点間の位置でグラデーションの方向を指定します。

context.createRadialGradient(x0, y0, r0, x1, y0, r1)

「x0, y0」「x1,y1」を同じ位置にすればとりあえず中心からグラデーションが掛かるようになりますね。