nigoblog

技術系会社のCEOブログ~私的編~

【連載】最終回HTML5でCanvasアプリを作る入門編~アニメーションについて~

この連載で最終回となります。これまでのことを振り返ると、

  1. 画像の描画
  2. マウスイベント

という流れで来ています。最終回はアニメーションについて書いていきます。

これまでの流れを全てやればアプリケーションを作るための要素はある程度網羅しています。
今回は

  1. アニメーションの実装
  2. マウスイベントと合わせる
  3. まとめ

という感じで書いていきます。

アニメーションの実装

今回もおなじみな感じで次のように書きます。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title>canvasApp</title>
</head>
<style type="text/css">
#first{
	border: 1px solid #999;
}
</style>
<body onload="init()">
	<canvas id="first" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('first');
var ctx    = canvas.getContext('2d');

function init(){
}
</script>
</body>
</html>

前提となるアニメーションの流れなのですが、

  1. 画像を描画
  2. 前回の画像を消去
  3. 新しく位置を変更し描画
  4. 上記1~3を一定時間毎に繰り返す

このような流れです。

画像の描画は

function draw(x, y){
	ctx.strokeRect(x, y, 50, 50);
}

前回の画像の消去には

function clear(){
	ctx.clearRect(0, 0, 500, 500);
}

という関数を用意します。
それではアニメーションの実装に入っていきます。
init()内に次のように記述します。

function init(){
  	var i=0;
  	var j=0;
  	setInterval(function(){
		i++;
		j++;
		clear();
		draw(i, j);
	}, 1000/33);
}

これを追加すると読み込んだ瞬間左上から徐々に右下に移動するようなアニメーションが完成します。

i += 5;
j += 5;

にしたり、

1000/33

100/33

などにすると速度が変わります。
この辺りを色々変化させてみましょう。

マウスイベントと合わせる

前回のbutton()を追加します。

function button(x, y, width, height){
	ctx.rect(x, y, width, height);
	ctx.stroke();
	canvas.addEventListener('click', function(e){
	    var button = e.target.getBoundingClientRect();
	    mouseX = e.clientX - button.left;
		mouseY = e.clientY - button.top;
		if(x < mouseX && mouseX < x + width){
			if(y < mouseY && mouseY < y + height){
				if(toggle){
					toggle = false;
				}else{
					toggle = true;
				}
			}
		}
	}, false);
}

この関数を利用して、
init()内で適当な位置に配置します。

button(400, 400, 50, 50);

次にclear()の範囲を変更します。
これをしないとボタンが消えてしまうので。

function clear(){
	ctx.clearRect(0, 0, 400, 400);
}

次にグローバル変数として、init()の上に

var toggle = true;

function init(){
}

と追加します。

最後にinit()内にアニメーションを作成します。

function init(){
	button(400, 400, 50, 50);
	var i=0;
	var j=0;
	setInterval(function(){
		if(toggle){
			i++;
			j++;
		}else{
			i--;
			j--;
		}
		clear();
		draw(i, j);
	}, 1000/33);
}

ボタンの切り替えによって進む方向が変化します。
他にもボタンを押すとストップさせたり、スタートさせたりをすることも出来ます。

以上簡単でしたがアニメーションでした。

まとめ

全4回に渡ってHTML5canvasアプリを作る方法について書いて来ました。
これまで冒頭でも書いたように

  1. 描画
  2. マウスイベント
  3. アニメーション

について書いてきました。
これらはアプリケーションを作る上での基礎となってきます。
今回の知識は通常のwebアプリを作る上でもかなり参考になるかと思います。

また、プログラミングはこれらを組み合わせて行うものということも認識できるかと思います。
どんどん新しいことも増えてきますが、結局は基礎の組み合わせであるということを認識しておくと良いでしょう!!