エスキュービズム ラボ Blog

Flush等に頼らずともリッチな表現や高機能なアプリケーションを実現可能なHTML5が注目されています。

これまでのHTMLと比較すると、より文脈の構造化を表現するための要素や、グラフィック・オーディオなどのマルチメディア処理を実現する要素が追加されています。

というわけで、今回のラボブログのテーマはHTML5です。特に筆者が注目している、canvas要素を試してみました。

早速canvas要素を使ってみましょう。下記がcanvasタグの簡単な例です。

<canvas id=”main_canvas” width=”400″ height=”300″>

canvasをサポートするブラウザをご利用ください。

</canvas>

canvasの中に記述した文字はcanvas非対応ブラウザでのみ表示されます。JavaScriptを使ってcanvas要素にアクセスし、グラフィックコンテキスト（そのキャンバスに対応するペンのようなもの）を取得します。

var canvas = document.getElementById("main_canvas");
var context = canvas.getContext("2d");

このコンテキストオブジェクトを使って、図形を描画します。基本的な流れは下記の通りです。

1. スタイルを設定する(fillStyleフィールド, strokeStyleフィールド)。
2. 描画の経路を開始する(beginPath())。
3. 描画の経路を設定する(点移動:moveTo(), 直線:lineTo(), 円弧:arc())。
4. 必要であれば、経路を閉じる(closePath())。
5. 描画する（塗りつぶす：fill()、線を描く：draw()）

丸を描くサンプルを以下に示します。

function drawFrame(){
	var canvas = document.getElementById("canvas2");
	if (canvas.getContext) {
		var x = Math.floor(400 * Math.random());
		var y = Math.floor(300 * Math.random());
		var context = canvas.getContext("2d");
		var r = Math.floor(255*Math.random());
		var g = Math.floor(255*Math.random());
		var b = Math.floor(255*Math.random());
		var a = getTransparency();
		context.fillStyle = "rgba(255,255,255, "+a+")";
        	context.fillRect(0,0,400,300);
		context.fillStyle = "rgb("+r+","+g+","+b+")";
		context.beginPath();
		context.arc(x,y,40,0,Math.PI*2,true);
        	context.fill();
	}
}
function getTransparency(){
	var control = document.getElementById("transparency");
	return control.value / 100;
}

ここから実際にサンプルのHTMLとJavaScriptを貼り付けています。「このブラウザはcanvasをサポートしていません」と
メッセージが表示されている場合はブラウザがcanvasをサポートしていません。

現行のFirefox, Chrome, Safari等のブラウザではこのサンプルが表示可能ですが、残念ながらIE8においてはcanvasはサポートされておらず、表示できません。

このブラウザはキャンバスをサポートしていません

このボタンを押すと、drawFrameを実行します。はじめに背景を塗りつぶし、ランダムな箇所に丸を描きます。

なお、背景の透明度は下記のrangeフォームで選べるようにしてあります。

updateの透明度：

なお、この処理を一定間隔で行うとアニメーションが実現できます。

function startAnim(){
	setInterval("drawFrame()",10);
}

このボタンを押すとアニメーションを開始します。

JavaScriptで記述するので、フォームとの親和性が良いのも開発者にとっては魅力的です。比較的自由なレイアウトで、簡単にインタラクティブなコンテンツを作成できます。この面白さを一度味わってみてはいかがでしょうか。