|| home software nature technology koneta

HTML/Canvas要素で遊んでみる(3) 画像ファイルを使ったアニメーション

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

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

2006/03/28

はじめに

前回までにcanvas要素とJavascriptのみを用いてタイル画や化学構造式を描画してみましたが
canvas要素ではPNGやJPEGなどの画像ファイルを元にした画像も作成出来る様です。

というわけで横スクロールする背景の上に、背景を透過色に設定したPNG画像を重ね合わせる
アニメーションを試しに作ってみました。

思ったより描画速度が速いのでちょっとしたゲームなんかを作れそうな感じですね。

このサンプルでもテンキーの2,4,6,8を押すと実際にキャラクターを動かすことが出来ます。
＃ うまくいかない場合にはこのウィンドウを一度選択してください。

画像ファイルを使ったアニメーション

キャラクターは1995年頃に何となく思いついたものです。
友人らに見せたら、「(これを描いているお前が)キモい。」と言われました。あれー。

ソース

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

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

// 大域変数の定義
var kumax = 100;		// くまむしのX座標
var kumay = 100;		// くまむしのY座標
var skyx = 0;			// 背景のX座標
var interval = 150;	// タイマのインターバル
var omake = false;	// おまけ(その1)のフラグ
var timerID;		// おまけ(その2)用のタイマID

// イベントハンドラ
document.onkeydown = KeyPressed;

// canvasがサポートされていれば描画を開始する
//
function Initialize()
{
	canvas = document.getElementById("canvas0301");
	if(canvas.getContext)
	{
		DrawPic();
	}
}

// 一定時間毎に呼ばれてお絵かきをする関数
//
function DrawPic()
{
	canvas = document.getElementById("canvas0301");
	context = canvas.getContext("2d");

	// 背景の描画
	context.drawImage(document.getElementById("sky"), skyx, 0, 300, 300, 0, 0, 300, 300);

	// くまむしの描画
	var f = Math.sin(skyx/900*24*Math.PI)*5;
	if(skyx%2 == 1)
	{
		context.drawImage(document.getElementById("kuma01"), kumax, kumay+f);
	}
	else
	{
		context.drawImage(document.getElementById("kuma02"), kumax, kumay+f);
	}

	// おまけ (その1)の描画
	if(omake)
	{
		context.drawImage(document.getElementById("bottomstatus"), 0, 280);
		context.drawImage(document.getElementById("upperstatus"), 115, 10);
	}
	
	skyx += 3;
	if(skyx >= 900)
	{
		skyx = 0;
	}

	timerID = setTimeout("DrawPic()", interval);
}

// OnKeyPressで呼ばれる関数
function KeyPressed(event)
{
	if(event.keyCode == 38 || event.keyCode == 40)
	{
		autokumay = false;
	}
	switch(event.keyCode)
	{
		case 72:  // H
		case 100: // 4
			if(interval < 210){interval += 50;}
			break;
		case 75:  // K
		case 104: // 8
			if(kumay >= 10){kumay -= 5;}
			break;
		case 76:  // L
		case 102: // 6
			if(interval > 10){interval -= 50;}
			break;
		case 74: // J
		case 98: // 2
			if(kumay < 215){kumay += 5;}
			break;
		case 90:  // Z
		case 101: // 5
			DrawLaser();
			break;
		default:
			break;
	}
}

// おまけ (その1)
function ChangeOmakeFlag()
{
	omake=!omake;
}

// おまけ (その2)
function DrawLaser()
{
	canvas = document.getElementById("canvas0301");
	if(canvas.getContext)
	{
		clearTimeout(timerID);

		var f = Math.sin(skyx/900*24*Math.PI)*5;
		context=canvas.getContext("2d");

		context.strokeStyle = "#FFFFFF";
		context.beginPath();
		context.moveTo(kumax+70, kumay+40+f);
		context.lineTo(299, kumay+40+f);
		context.closePath();
		context.stroke();

		context.strokeStyle = "#FFFF00";
		context.beginPath();
		context.moveTo(kumax+70, kumay+41+f);
		context.lineTo(299, kumay+41+f);
		context.closePath();
		context.stroke();

		timerID = setTimeout("DrawPic()", 100);
	}
}

//-->
</script>

Copyright © MASUDA Yoshihiro (contactmasudayoshihiro.jp).