HTML5 Canvas 动画小例子-优快云博客

■概要

　・HTML5のCanvasタグを使って回転しているボールを描くサンプルである。

■要点

　・setIntervalを利用し、定時的にメソッドを呼ぶ

　・contextのtranslate、rotate、drawImage、save、restoreを利用し、回転、イメージを描く

■ソース

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ball</title>
</head>

<body>

<div style="text-align:center;">
	<canvas id="testCanvas" width="500" height="300" style="border:1px solid #1111AA;"></canvas>
</div>

<br>Debug Space<br>
<textarea id="debugDiv" style="border:1px solid #1111AA;width:500;height:150;font-size:small"></textarea>

<script type="text/javascript">
var dncsoft;
if (!dncsoft) dncsoft = {};

dncsoft.Debug = function() {};
dncsoft.Debug.prototype = {
	debug : function(p_msg) {
		var debugDiv = document.getElementById('debugDiv');
		if ( ! debugDiv ) return false;
		debugDiv.value = debugDiv.value + p_msg + "\n";
	},
	clear : function() {
		debugDiv.value = "";
	}
};
var g_log = new dncsoft.Debug();
g_log.clear();
//-----------------------------------------------
// dncsoft.Board
//-----------------------------------------------
dncsoft.Board = function() {};
dncsoft.Board.prototype = {
	_ctx : null,
	getCtx : function() {
		return _ctx;
	},

	init : function() {
		_width = 500;
		_height = 300;
		_canvas = document.getElementById('testCanvas');
		if ( ! _canvas || ! _canvas.getContext ) return false;
		_ctx = _canvas.getContext('2d');
	},
	
	draw : function() {
		_ctx.beginPath();
		_ctx.fillStyle = "#EEEEEE";
		_ctx.fillRect(0, 0, _width, _height);
	}
};

//-----------------------------------------------
// dncsoft.Ball
//-----------------------------------------------
dncsoft.Ball = function() {
	this._angle = 45;
	this._x = 0;
	this._y = 0;
};
dncsoft.Ball.prototype = {
	_angle :45,
	_x :0,
	_y :0,
	getAngle : function() {
		return this._angle;
	},
	setAngle : function(p_angle) {
		this._angle = p_angle;
	},
	
	init : function(p_ctx, p_angle) {
		this._x = 200;
		this._y = 100;
		_radius = 32;
		_speed = 1;
		_rotate = 2;
		_img = new Image();
		_img.src = "magic_ball.png";
		_ctx = p_ctx;
		this._angle = p_angle;
	},
	
	draw : function() {
		_rotate = (_rotate + 1) % 360;

		_ctx.save();
		_ctx.translate(this._x, this._y);
		_ctx.rotate(_rotate/180 * Math.PI);
		_ctx.translate(-16, -16);
		_ctx.drawImage(_img, 0, 0, _radius, _radius);
		_ctx.restore();

		this._x = this._x + (5 * Math.sin(this._angle/180 * Math.PI));
		this._y = this._y + (5 * Math.cos(this._angle/180 * Math.PI));
		_rotate = _rotate + 4;
		
		this.calcPath();
	},
	
	calcPath : function() {
		if (this._x < 16) {
			this._angle = 360 - this._angle;
		} else if (this._x > 500 - 16) {
			this._angle = 360 - this._angle;
		} else if (this._y < 16) {
			this._angle = 180 - this._angle;
		} else if (this._y > 300 - 16) {
			this._angle = 180 - this._angle;
		}
		this._angle = this._angle % 360;
	}
};

//-----------------------------------------------
// main
//-----------------------------------------------

var g_board;
var g_ball;
var g_counter;
var g_timerDrawID;

window.onload = function() {
	g_counter = 1000;
	g_board = new dncsoft.Board();
	g_board.init();

	g_ball = new dncsoft.Ball();
	g_ball.init(g_board.getCtx(), 30);

	g_timerDrawID = setInterval("ballMove()", 25);
};

function ballMove() {
	g_board.draw();
	g_ball.draw();
	g_counter--;
	if (g_counter <= 0) clearInterval(g_timerDrawID);
}
</script>
</body>
</html>

■結果