html5画布旋转和移动问题

Question

我想旋转180度，并移动对象。但这不适合我。我补充它在jsfiddle

var enemy = enemeis[i]; 

// 45 shows some rotation, I want 180%    
var rangle = 45 * Math.PI/180 ; 
ctx.save(); 

ctx.translate(enemy.x, enemy.y); 
ctx.rotate(rangle); 
ctx.drawImage(enemy.el , enemy.x , enemy.y); 

ctx.restore();      

enemy.y++; 

我想敌人的bug旋转180％，并且移动从上到下。我真的迷失在这里，并希望得到一些帮助。

Answer 1

我固定它给你：http://jsfiddle.net/nubbel/DVpWL/3/

var enemy = enemeis[i]; 

var rangle = Math.PI ; 
ctx.save(); 

var offsetX = enemy.x + enemy.el.width/2.0; 
var offsetY = enemy.y + enemy.el.height/2.0; 

ctx.translate(offsetX, offsetY); 
ctx.rotate(rangle); 
ctx.translate(-offsetX, -offsetY); 

ctx.drawImage(enemy.el , enemy.x , enemy.y); 

ctx.restore();      

enemy.y++;     

基本上，它的作用是：

• 移动坐标系的原点到敌人图像的中心
• 绕那点
• 将原点移回到之前的点