|| home software nature technology koneta

HTML/Canvas要素で遊んでみる (1) タイル画アニメーションの描画

ホーム / 技術っぽいもの / HTML/Canvas要素で遊んでみる (1)

[HTML/Canvas要素で遊んでみる (2)へ >]

2006/03/26

はじめに

つい最近まで全く知らなかったのですが、先日リリースされたFirefox 1.5を含むいくつかのウェブブラウザでは
<canvas>という画像を動的に描画出来る新しい要素がサポートされている様です。

＃ HTML 5 にも取り込まれる模様。

今までFlashやJavaを用いて行っていたことのいくつかはこのcanvas要素で行えるのではないでしょうか。
eval()や、XMLHttpRequest (いわゆるAJAXですな)と組み合わせたりしても面白そうな気がします。

というわけで早速簡単なサンプルを作って基礎を学んでみます。
Javascript自体もあんまり経験が無いのでその勉強も兼ねてやってみたいと思います。

タイル画

感想

• 文字の出力はどうして出来ないんだろう。textOut(x, y, string)とか。
  英数字ならmoveTo()とlineToを組み合わせて作る気も起きるけど日本語はちょっとな。
• 点の描画はどうして出来ないんだろう。setPixel(x, y)とか。
• ってかそういう使い道じゃないってことなんだろうか。
• けどgetPixel(x,y)もあったら便利そう。
• ウェブブラウザのサイズ変更などをしても再描画が必要ないのは便利。
• 本格的に普及するのはInternet Explorerが対応してからでしょうか。
• 3D contextがサポートされると更に楽しそうです。
  現段階のWeb Applications 1.0 ワーキングドラフトによると「Well, one day」だそう。
• そしてAJAXは今まで勝手に「アヤックス」と読んでいたのだけれども、「エイジャックス」だということを知りました。
  全然関係ないけれども。[参考]

関連サイト

仕様等

• Web Application 1.0, Working Draft (23 March 2006)
• Canvas tutorial @mozilla.org

canvas要素について言及されている日本語のサイト

• <canvas>タグリファレンス (OpenSpaceさん)
• いい加減なcanvas要素の紹介 (Taken SPCさん)

ソース

View Sourceしたものと同じ内容です。

<script type="text/javascript">
<!--

// 大域変数の美しくない定義
var step = 0;
var colors = new Array(1,1,1,2,1,1,2,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
var xs = new Array(3,1,2,3,4,5,3,1,2,3,4,5,3,1,2,3,4,5,1,3,1,2,3,0,0,0,0,0, 3,1,2,3,4,5,3,1,2,3,4,5,3,1,2,3,4,5,1,3,1,2,3,0,0,0,0,0);
var ys = new Array(0,1,1,1,1,1,2,3,3,3,3,3,4,5,5,5,5,5,6,6,7,7,7,0,0,0,0,0, 0,1,1,1,1,1,2,3,3,3,3,3,4,5,5,5,5,5,6,6,7,7,7,0,0,0,0,0);


// canvasがサポートされていれば、枠と格子を描画して引き続きタイマをセット。
//
function Initialize()
{
	canvas = document.getElementById("canvas0101");

	if(canvas.getContext)
	{ // mozilla.orgのtutorialにあったサポート判別法
	
		context = canvas.getContext("2d");
		
		// 枠を書く
		context.fillStyle = "#006699";
		context.fillRect(0, 0, 300, 340);
		context.fillStyle = "#ffffff";
		context.fillRect(9, 9, 280, 320);
		
		// 格子を書く
		for(var i = 0; i <= 320; i += 40)
		{
			// 縦線
			if(i != 320)
			{
				context.beginPath();
				context.moveTo(i+10, 9);
				context.lineTo(i+10, 329);
				context.closePath();
				context.stroke();
			}
			
			// 横線
			context.beginPath();
			context.moveTo(9, i+10);
			context.lineTo(289, i+10);
			context.closePath();
			context.stroke();
		}
		// 引き続きタイマをセット
		setTimeout("DrawPic()", 400);
	}
}

// 一定時間毎に呼ばれてお絵かきをする関数
//
function DrawPic()
{
	// canvasをサポートしていないウェブブラウザではこの関数は呼ばれないので
	// if(context.getContext){...}は書かないでおく。
	canvas = document.getElementById("canvas0101");
	context = canvas.getContext("2d");
	
	// 色を設定して
	gradient = context.createLinearGradient(40*xs[step]+11, 40*ys[step]+11, 40*xs[step]+49, 40*ys[step]+49);

	if(colors[step] == 1)
	{
		gradient.addColorStop(0.1, "#FCC15F");
		gradient.addColorStop(0.3, "#F6760E");
		gradient.addColorStop(0.8, "#F6760E");
		gradient.addColorStop(0.9, "#C75E07");
		context.fillStyle=gradient;
	}
	else if (colors[step] == 2)
	{
		gradient.addColorStop(0.1, "#67FF3C");
		gradient.addColorStop(0.3, "#008000");
		gradient.addColorStop(0.8, "#008000");
		gradient.addColorStop(0.9, "#005E00");
		context.fillStyle = gradient;
	}
	else
	{
		context.fillStyle = "#ffffff";
	}
	
	// 塗りつぶす
	context.fillRect(40*xs[step]+11, 40*ys[step]+11, 38, 38)

	// 次のコマへ進む
	if(++step >= colors.length)
	{
		step = 0;
	}
	setTimeout("DrawPic()", 200);
}

//-->
</script>

Copyright © MASUDA Yoshihiro (contactmasudayoshihiro.jp).