繪製一個路徑，然後在HTML5中的圖像

Question

我想繪製一個圓形，然後有一個圖像沿着圓周圍。稍後，我想旋轉並相對於繪製的圓形移動圖像。我面臨的問題是，當我嘗試旋轉圖像時，它不會旋轉。它也不會在控制檯中顯示錯誤。我的功能允許我移動圓圈，圖像隨之移動，我似乎無法旋轉圖像。

下面是代碼：

draw: function(){ 
//draw self on canvas; 
//intended only to be called from update, should never 
//need to be deliberately called 
ctx = this.context; 

ctx.save(); 
ctx.fillStyle="#000000"; 
ctx.beginPath(); 

//void arc(double x, double y, 
//   double radius, double startAngle, double endAngle, 
//   optional boolean anticlockwise = false); 
ctx.arc(this.x,this.y,this.size,0,Math.PI*2,true); 
ctx.closePath(); 
ctx.fill(); 
//ctx.translate(this.x, this.y); 
ctx.rotate(this.imgAngle); 
//draw the hammer 

ctx.drawImage(this.hammer,this.hammerX,this.hammerY,100,100) 
ctx.rotate(Math.PI/2); 

ctx.restore(); 

}, 

Answer 1

Live Demo

試着改變你的代碼如下。您需要在繪製前執行旋轉。您可以將畫布轉換爲實體位置，然後在x:0,y:0處繪製圖像以獲得所需的效果。注意我做了0-50,0-50，因爲它將原點設置在中心，因爲寬度和高度均爲100.意味着圖像將圍繞其中心旋轉，而不是繞其角落。

//draw the hammer 
ctx.translate(this.hammerX, this.hammerY); 
ctx.rotate(this.imgAngle); 
ctx.drawImage(this.hammer,0-50,0-50,100,100); 

Answer 2

旋轉只會影響旋轉後的圖紙完成。

您可以嘗試將旋轉調用移動到需要旋轉的對象之前？