キャンバス全体を回転していますか？

Question

私はHTML5の最も話題の機能、つまりキャンバスに手を差し伸べています。 2つの長方形があり、私は最初のものをそのまま回転させ、2番目のものをそのまま維持したい。問題は、以下のコードが私のキャンバス全体が回転し、両方の長方形が回転しているときです。私は、私が描画したオブジェクトへの参照を取得し、コンテキスト全体ではなく特定のオブジェクトのみを回転させるAPIを見つけることさえできません。

コード：

<script type="text/javascript"> 
    var context; 
    var radian = 0.01; 
    var w, h; 
    $(document).ready(function() { 
     w = document.width; 
     h = document.height; 
     var canvas = $('#canvas'); 
     context = canvas[0].getContext('2d'); 
     canvas[0].width = w; 
     canvas[0].height = h; 
     setInterval(startAnim, 200); 
    }); 

    function startAnim() { 
     context.clearRect(0, 0, w, h); 
     context.strokeStyle = 'rgb(0,0,0)'; 
     context.fillStyle = 'rgb(0,0,0)'; 
     context.fillRect(0, 0, w, h); 
     context.strokeStyle = 'rgb(0,0,0)'; 
     context.fillStyle = 'rgb(255,255,0)'; 
     context.rotate(radian); 
     context.strokeRect(400, 300, 200, 200); 
     context.fillRect(400, 300, 200, 200); 
     context.fillStyle = 'rgb(0,255,255)'; 
     context.fillRect(500, 400, 200, 200); 
     radian += 0.01; 
    } 
</script> 

がどのように私はこれを防ぐことができますか？

Answer 1

最後に、私は試行錯誤して自分でこの問題を解決しました。これはコードです：

<script type="text/javascript"> 
    var context; 
    var radian = 0.01; 
    var w, h; 
    $(document).ready(function() { 
     w = document.width; 
     h = document.height; 
     var canvas = $('#canvas'); 
     context = canvas[0].getContext('2d'); 
     canvas[0].width = w; 
     canvas[0].height = h; 
     setInterval(startAnim, 100); 
    }); 

    function startAnim() { 

     context.save(); 
     context.strokeStyle = 'rgb(0,0,0)'; 
     context.fillStyle = 'rgb(0,0,0)'; 
     context.fillRect(0, 0, w, h); 
     context.rotate(radian); 
     context.strokeStyle = 'rgb(0,0,0)'; 
     context.fillStyle = 'rgb(255,255,0)'; 
     context.strokeRect(400, 300, 200, 200); 
     context.fillRect(400, 300, 200, 200); 
     context.restore(); 

     context.fillStyle = 'rgb(0,255,255)'; 
     context.fillRect(500, 400, 200, 200); 

     radian += 0.1; 
    } 
</script> 

Answer 2

私が理解しているように、キャンバス全体をクリアして、各フレーム間ですべてを再描画する必要があります。矩形のデータをメモリに保存します。各フレームの間にcontext.clearRect(0, 0, w, h);を実行してから、新しい変更されたプロパティで再び矩形を描画します。