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

Question

我想在一个元素中移动和旋转一个直径为68像素的球形图像。该画布的大小为300x200。球沿着x轴和y轴移动，在撞到墙壁时翻转其x和y速度 - 所有这些都可以实现。但我不知道如何在运动的基础上进行旋转。

我的draw()函数通过window.setInterval每30毫秒调用一次，大致如下：

  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
  }

这会使球在屏幕上飞来飞去，很明显我做错了什么。我缺少了什么？

- mshafrir

Answer 1

1. 将上下文翻译为对象应该围绕其旋转的画布点。
2. 旋转上下文。
3. 要么：
   • 通过对象内部负偏移量将上下文平移，以获得旋转中心，并在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

- Phrogz