キャンバス要素の画像を回転させて移動する？

Question

要素内のボールの画像を移動して回転させたいと思います。ボールは68x68、キャンバスは300x200です。ボールはx軸とy軸に沿って移動し、xとyの速度が壁に当たったときに反転します。私はちょうど動きの上で回転をする方法を理解できません。

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 
    } 

これは、ボールが非常に明確に、私は何か間違ったことをやって、画面の周りに飛ぶなります：私はwindow.setIntervalを通じて、すべて30ミリ秒を呼び出す

マイドロー（）関数は、次のようになります。私は何が欠けていますか？

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