Question

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

我的draw（）函数，我每隔30ms通过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
  }

这使得球在屏幕上飞舞，显然我做错了。我错过了什么？

Answer 1

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

e.g。

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

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

1 个答案: