イメージ回転

HTML5

HTML5だと、テクスチャを回転させることができないので、擬似的にラインごとに描画して回転を実現しています。
Sample10.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample10.html</title>
<script>
 
var draw;
var	SOURCESIZE = {w:64,h:64};
var	imag;
var	windWidth;
var	windHeight;
 
function init(){
	imag = new Image();
	imag.src = "img/grand001.png";
	var outputcanvas = document.getElementById('output');
	draw = outputcanvas.getContext('2d');
	setInterval("processFrame()", 33);
	windWidth	= outputcanvas.width;
	windHeight	= outputcanvas.height;
}
 
var RAD = Math.PI/180;
var degree = 180;
 
function processFrame(){
	draw.clearRect(0, 0, windWidth, windHeight);
	
	var centerx = windWidth/2;
	var centery = windHeight/2;
	var radius = SOURCESIZE.w/2;

	degree += 1;
	degree %= 360;
	
	var angle = degree*RAD;
	var prepx = Math.cos(angle);
	var prepz = Math.sin(angle);
	
	for(var i=0; i<SOURCESIZE.w; i+=4){
		var dist = radius-i;
		var x = prepx*dist;
		var y = 0;
		var z = prepz*dist;
		var height = SOURCESIZE.h+(z*0.5);
		
		draw.save();
		if(degree < 90 || degree > 270){
			draw.translate(windWidth, 0);
			draw.scale(-1, 1);
			x *= -1;
		}
		var _x = Math.round(x+centerx);
		var _y = y+centery;
		draw.drawImage(imag, i, 0, 4, SOURCESIZE.h, _x, _y-(height/2), 4, height);
		draw.restore();
	}
}
</script> 
</head> 
 
<body onload="init()" style="margin:0px;"> 
<canvas id="output" width="300" height="300">
</body> 
</html>

この部分で定期的に動作するよう設定しています。

setInterval("processFrame()", 33);