整个画布正在旋转？

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);，然后再次绘制具有新改变属性的矩形。