在canvas元素中旋轉和移動圖像？

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

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