パスを描いてから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

回転は回転のみが行われた後に行われた図面に影響します。ここでは

はコードです。

回転させる必要があるオブジェクトの直前に回転呼び出しを移動できますか？