整個畫布正在旋轉？

Question

我只是試圖在HTML5的最受歡迎的功能，即畫布。有2個矩形，我只想旋轉1st並保持第二個原樣。問題是當下面的代碼運行時，我的整個畫布被旋轉並且兩個矩形都被旋轉。我什至不能找到任何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);，然後再次繪製具有新改變屬性的矩形。