Javascript 在画布元素中旋转和移动图像？

我想移动和旋转元素中球的图像。球是68x68，帆布是300x200。球沿着x轴和y轴移动，当它撞击墙壁时，会翻转其x轴和y轴的速度-所有这些都有效。我就是想不出如何在动作的顶端旋转

我的draw（）函数（每隔30毫秒通过window.setInterval调用一次）如下所示：

  var draw = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.rotate(ball_radians);
    ctx.drawImage(ball_img, x, y);
    ctx.restore();

    // calculate new x, y, and ball_radians
  }

这使得球在屏幕上飞来飞去，所以很明显我做错了什么。我错过了什么

将上下文转换为画布上对象应围绕其旋转的点

旋转上下文

要么：

• 以旋转中心为对象内的负偏移平移上下文，然后在

  0,0

  处绘制对象，或
• 使用对象内旋转中心的负偏移绘制图像

e、 g

请注意，如果您需要绝对速度，而不是保存和恢复画布（处理许多未更改的属性），您可以撤消您的工作：

ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.rotate( -ballRotationInRadians );
ctx.translate( -canvasLocX, -canvasLocY );

之前的一些过早优化已经被盲目地模仿别人；我个人没有进行基准测试来验证它是否正确

编辑：我在这里添加了一个模拟工作示例：

ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.rotate( -ballRotationInRadians );
ctx.translate( -canvasLocX, -canvasLocY );