canvasで画像のみその場で回転させ、他の要素はそのまま表示させるJavaScriptプログラム。
回転の中心位置(画像の中心座標)取得とsetTransformメソッドによって実現できる。
// 今の状態を保存する g.save(); // 回転の中心位置を計算(画像の中心を回転中心にする) var cx = x + img.width/2; var cy = y + img.height/2; // 画像を回転 g.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad)); g.drawImage(img, x, y); g.restore();
以下、プログラム全体
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="rotate.js"></script> <title>rotate image</title> <style> #canvas { border: solid 1px #ddd; margin: 32px; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
JavaScript部分
// ------------------------------------------------------------------------- // 画像の回転 // // created at 2014-1-7 on torisky.com // ------------------------------------------------------------------------- /* * 定数 */ var SCREEN_WIDTH = 500; var SCREEN_HEIGHT = 500; var TICK = 1000/30; var IMG_SRC = "slime.png"; /* * グローバル変数 */ var $id = function(id){ return document.getElementById(id); }; var canvas = null; // キャンバス var g = null; // コンテキスト var title; // タイトル文字列 var img = new Image(); // 画像 var obj = null; // 画像オブジェクト /* * 初期化関数 */ var initialize = function(){ title = "画像の回転"; img.src = IMG_SRC; img.onload = function(){ g.drawImage(img, -1000, -1000); }; g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); obj = new MyImage(200, 200); }; /* * 画像クラス */ var MyImage = function(sx, sy){ var angle = 0; var rad = 0; // 初期位置 var x = sx; var y = sy; // フレームごとの動作 this.update = function(){ // 角度をラジアンに変換 rad = angle * Math.PI/180; // 今の状態を保存する g.save(); // 回転の中心位置を計算(画像の中心を回転中心にする) var cx = x + img.width/2; var cy = y + img.height/2; // 画像を回転 g.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad)); g.drawImage(img, x, y); g.restore(); // 回転角度を変化させる angle ++; if(angle > 360) angle = 0; // 情報表示 g.fillStyle = "rgba(0, 0, 0, 0.5)"; g.fillText(title, 220, 150); g.fillText("angle: " + angle, 24, 32); // g.fillText("rad: " + rad, 24, 64); // return true; }; }; /* メイン処理 */ var mainLoop = function(){ g.fillStyle = "rgb(200, 200, 200)"; g.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); // オブジェクトの動作と消去 if(obj && !obj.update()){ delete obj; } setTimeout(mainLoop, TICK); }; /* * 起動処理 */ window.onload = function() { // キャンバス情報取得 canvas = $id("canvas"); g = canvas.getContext("2d"); // 初期化 initialize(); // ゲームループ mainLoop(); };
コメント
[…] ← 前へ […]