1

私は円を描いてから、円に沿って画像を作ろうとしています。後で、描かれた円に対して画像を回転させたり移動したりしたいと思います。私が直面している問題は、画像を回転させようとすると回転しないことです。また、コンソールにエラーが表示されません。円を移動できる機能があり、画像も一緒に移動しますが、画像を回転させることはできません。

コードは次のとおりです。

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();

},
4

2 に答える 2

0

回転は、回転後に作成された図面にのみ影響します。

回転が必要なオブジェクトの直前に回転呼び出しを移動してみてはいかがでしょうか?

于 2012-04-23T01:36:50.023 に答える
0

ライブデモ

コードを次のように変更してみてください。描画する前に回転を実行する必要があります。キャンバスをエンティティの位置に移動してから、画像を描画して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);
于 2012-04-23T01:43:37.510 に答える