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

【问题标题】：Rotating and moving an image in a canvas element?在画布元素中旋转和移动图像？
【发布时间】：2011-06-09 11:35:17
【问题描述】：

我想在元素中移动和旋转球的图像。球为 68x68，画布为 300x200。球沿着 x 和 y 轴移动，当它撞到墙壁时会翻转它的 x 和 y 速度——所有这些都有效。我只是不知道如何在运动之上进行旋转。

我每 30 毫秒通过 window.setInterval 调用一次的 draw() 函数看起来像这样：

  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
  }

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

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

将上下文转换为画布上对象应围绕其旋转的点。
旋转上下文。
要么：
- 通过对象内的负偏移量平移上下文作为旋转中心，然后在0,0处绘制对象，或者
- 使用对象内的负偏移作为旋转中心绘制图像。

例如

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

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

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

之前的一点点过早的优化已经被别人一味地照搬了；我没有亲自进行基准测试来验证它是否正确。

编辑：我在这里添加了一个模拟的工作示例：http://phrogz.net/tmp/canvas_beachball.html

【讨论】：