トップ > HTML5 | JavaScript > とりあえず HTML5 の canvas でランダムに簡単な図形を描画してみた

とりあえず HTML5 の canvas でランダムに簡単な図形を描画してみた

2010-06-02 (水)
HTML5 | JavaScript

なんか、HTML5 の canvas がちょっと面白そうだってことで、どんなもんか試してみた。

とりあえずは、乱数を使ってランダムで3パターンの簡単な描画が表示されるようにしてみる。

IE の場合、基本的に canvas に対応していないが、「ExplorerCanvas」という javascript ライブラリを利用すると同じように描画が可能となるようだ。しかし、なんかうまく描画されない箇所もある…。完全な対応状況ではないってことかな？

canvas 自体は基本的に何も表示されないらしく、javascript で線や円などの図形を描画する処理を行わないと意味がないようだ。

あと、基本的にアニメーションすることができないらしい。といっても、1コマごと描画を繰り返すことでアニメーションのように見せることが可能らしい。よく Flash と比較されるんで、てっきりアニメーションなども対応しているかと思ったけども違うんだねー。うーむ…。

しかし、今回の canvas のサンプル描画については、Flash の BitmapData の描画などにも共通する部分があるので馴染み深い印象。

ちなみに、javascript のコードはこんな感じ。


window.onload = function() {
	draw();
};
function draw() {
	//キャンバスの初期処理
	var canvas = document.getElementById('testCanvas');
	if ( ! canvas || ! canvas.getContext ) return false;
	
	//2Dコンテキスト
	var ctx = canvas.getContext('2d');
	
	//ランダム数値
	var ranNo = Math.floor(Math.random() * 3);
	
	if (ranNo == 0) {
		//線の色設定
		ctx.strokeStyle = "#8080ff";
		//三角形を描く
		ctx.beginPath();	//線を描くと宣言
		ctx.moveTo(20, 20);	//描き始めるXY座標を指定
		ctx.lineTo(20, 280);	//引きたい線のXY座標を指定
		ctx.lineTo(480, 280);	//引きたい線のXY座標を指定
		ctx.closePath();	//描いた線を閉じる
		ctx.stroke();		//描画
		//テキストの描画
		ctx.font = '24px';
		ctx.fillStyle = "#DD0000";
		ctx.textBaseline = "top";
		ctx.fillText("No.1（全3種） 三角形を描く", 10, 24);
	} else if (ranNo == 1) {
		//塗りの色設定
		ctx.fillStyle = "#008080";
		//矩形を描く
		ctx.beginPath();	//線を描くと宣言
		ctx.fillRect(50, 50, 500, 200);	//塗りつぶした矩形を描画
		ctx.beginPath();	//線を描くと宣言
		ctx.clearRect(300, 150, 200, 80);	//矩形を削除
		//テキストの描画
		ctx.font = '24px';
		ctx.fillStyle = "#666666";
		ctx.textBaseline = "bottom";
		ctx.fillText("No.2（全3種） 矩形を描く", 10, 24);
	} else if (ranNo == 2) {
		//グラデーション領域設定
		var grad  = ctx.createLinearGradient(200, 100, 400, 200);
		//グラデーション
		grad.addColorStop(0,'#DD0000');    // 赤
		grad.addColorStop(0.5,'#0000DD'); // 青
		grad.addColorStop(1,'#00DD00');  // 緑
		//塗りの色設定
		ctx.fillStyle = grad;
		//円を描く
		ctx.arc(300, 150, 150, 0, Math.PI*2, false);
		ctx.fill();
		//テキストの描画
		ctx.font = '24px';
		ctx.fillStyle = "#FF66CC";
		ctx.textBaseline = "middle";
		ctx.fillText("No.3（全3種） グラデーションの円を描く", 10, 24);
	}
}

キャンバスの初期処理や 2D コンテキストの処理は決まりごとみたいな感じのようなので特に記述を調整する必要はなさそう。

もしかして、いずれは 3D とかの描画に対応してくるのかなー？