トップ > HTML5 | JavaScript > HTML5 の canvas でアニメーションさせてみる

HTML5 の canvas でアニメーションさせてみる

2010-06-03 (木)
HTML5 | JavaScript

HTML5 の canvas での javascript も Flash のアクションスクリプトもわりと共通性が高いんで、引き続き、HTML5 の canvas でアニメーション処理を行ってみた。

サンプルは三角関数を使ったアニメーション。ちょうど、このブログでエントリしている「三角関数とFLASH」が、同じようなアニメーションの記事があるので、これをもとに作ってみた。

⇒サンプルを見る（別ウインドウ）

IE は無理っぽい感じか…？
Firefox や Safari、Chrome あたりだと問題無く動作しているようだ。

まぁ、こんな感じで円のオブジェクトがクルクル回るようなアニメーション。座標だけではなく、大きさや透明度なども調整を加えてみた。

基本的にはタイマーで一定時間ごとに座標計算して描画する感じ。

Flash で BitmapData の描画アニメーションさせるのとそう大きく違いはないんで、比較的すんなりとこのサンプルを作成することができた。

少し、ハマってしまったのが、円オブジェクトを描画する前に「beginPath()」を記述し忘れてしまい、表示クリアが正常に行われなかった…。ちょっとしばらくの間「なんでだ？なんでだ？」とあれこれ原因を調べる結果となってしまったので今度からは注意しよう。

javascript のコードはこんな感じ。


var timerID;
var cW = 600;	//キャンバス横サイズ
var cH = 300;	//キャンバス縦サイズ
var i = 0;	//角度の初期値
var div = 5;	//角度の増源値
var objX = 300;	//オブジェクトのX座標
var objY = 150;	//オブジェクトのY座標
var objS;	//オブジェクトのサイズ
var objA;	//オブジェクトの透明度
var maxAlpha = 1;//最大アルファ値
var defScall = 20;	//オブジェクトのデフォルトサイズ
var radiusX = cW / 2 - 50;	//横の半径
var radiusY = cH / 2 - 50;	//縦の半径
window.onload = function() {
	setTimer();
};
function setTimer(){
	clearInterval(timerID);
	timerID = setInterval("setMove()", 50);
}
function setMove(){
	//角度調整
	i += div;
	//パラメータの計算
	divSin = Math.sin(i / 360 * 2 * Math.PI);
	divCos = Math.cos(i / 360 * 2 * Math.PI);
	objX = divSin * radiusX + cW / 2;	//X座標
	objY = divSin * radiusY + cH / 2;	//Y座標
	objS = (divCos + 2) / 2 * defScall;	//大きさ
	objA = (divCos + 2) / 2 * maxAlpha;	//透明度
	
	//描画処理
	draw();
}
function draw() {
	//キャンバスの初期処理
	var canvas = document.getElementById('testCanvas');
	if ( ! canvas || ! canvas.getContext ) return false;
	//2Dコンテキスト
	var ctx = canvas.getContext('2d');
	//表示クリア
	ctx.clearRect(0, 0, cW, cH);
	
	//円を描く
	ctx.beginPath();
	ctx.globalAlpha = objA;
	ctx.fillStyle = "#CC0000";
	ctx.arc(objX, objY, objS, 0, Math.PI * 2, false);
	ctx.fill();
	
	//テキストの描画
	ctx.globalAlpha = 1;
	ctx.fillStyle = "#666666";
	ctx.fillText("X座標：" + objX, 5, 12);
	ctx.fillText("Y座標：" + objY, 5, 24);
	ctx.fillText("大きさ：" + objS, 5, 36);
	ctx.fillText("透明度：" + objA, 5, 48);
}

最初に「setTimer()」が実行してタイマー処理が開始され、一定時間ごとに「setMove()」⇒「draw()」が繰り返し実行し、結果アニメーションを表現することができる。