HTML5 Canvas 动画小例子

yutiansky · 发表于 2013-2-7 20:04:01

■概要
　・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> ■結果

		自动登录	找回密码
密码			立即注册