전체 캔버스를 회전하고 있습니까?

Question

저는 HTML5에서 가장 많이 사용되는 기능인 캔버스에 손을 잡고 있습니다. 2 개의 직사각형이 있고 나는 단지 1을 회전시키고 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);을 수행 한 다음 변경된 속성으로 다시 사각형을 그립니다.