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