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++;     

基本上，它的作用是：

• 移動座標系的原點到敵人圖像的中心
• 繞那點
• 將原點移回到之前的點