<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">
<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图
<DIV>
//使角度转起来
var angle = 0
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360
//使角度增加
angle+=15
//do rotation
rotate("aDiv",angle)
//定位旋转中心
var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.
el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试
el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2
//循环
setTimeout("doRotate()",20)
}
这是CSS3里面的属性,以中心为圆点旋转:transform-origin:center 0px
旋转角度:transform:rotate(360deg)
顺时针旋转角度
旋转角度可以写在js代码里,点击旋转或者加载页面旋转.都行
给你一个旋转的demo:
<!DOCTYPE html><html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br/>
<input type="text" id="angle_v" readonly="1"/>
<script>
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.translate(100,45)
//ctx.rotate(70*Math.PI/180)
//ctx.fillRect(-50,-25,100,50)
var angle=10
var angle_now = 0
myRotate()
function myRotate()
{
ctx.clearRect(-100,-50,200,100)//x2 是为了把原来的图全部抹掉（不留下痕迹）
ctx.rotate(angle*Math.PI/180)
ctx.fillRect(-50,-25,100,50)
angle_now= (angle_now + angle)%360
document.getElementById("angle_v").value="当前角度:"+angle_now
setTimeout(myRotate,1000)
}
</script>
</body>
</html>
注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45)
坐标中心点计算公式：x = 左上角x + 宽度/2
y = 左上角y + 高度/2
然后translate到(x,y)即可，之后调用rotate进行旋转。
旋转之后填充时注意：ctx.fillRect(-50,-25,100,50)
x = - 宽度/2
y = -高度/2
fillRect(x,y,宽度，高度)
你的例子，代码控制比较看不懂。。。，所以没在基础上整改。
补充一个参考网站（英文的）：http://tutorials.jenkov.com/html5-canvas/transformation.html
（如果有帮助，望采纳，谢谢）
