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 回答