Javascript 在html5中绘制路径和图像

我试着画一个圆，然后让一个图像跟随这个圆。稍后，我想围绕绘制的圆旋转和移动图像。我面临的问题是，当我尝试旋转图像时，它不会旋转。它也不会在控制台中显示错误。我有一些功能可以让我移动圆圈，图像也随之移动，但我似乎无法旋转图像

代码如下：

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

},

---

旋转仅会影响旋转完成后绘制的图形

您可以尝试将旋转调用移动到需要旋转的对象之前？

尝试将代码更改为以下内容。您需要在绘制之前执行旋转。您可以将画布转换为实体位置，然后在

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