CanvasRenderingContext2D.rotate()


       html5.jpg



설명


    원점을 기준으로 캔퍼스를 회전 시킵니다.


분류


    변형 API


형태


    void CanvasRenderingContext2D.rotate(in float angle);


인수


    in     float     angle      회전 각도


반환


    없음


예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

      var canvas = document.getElementById("canvas"); 

      if (canvas.getContext) { 

        var ctx = canvas.getContext("2d"); 

 

         ctx.translate( 50, 50 );       

         angle_step = Math.PI*2/10;

        

        ctx.fillStyle = "rgb(200,0,0)"; 

        ctx.strokeStyle      = "rgb(0,0,0)"; 

 

         for( i=0;i<10;i++)

         {       

        ctx.fillRect (0, 0, 40, 10); 

        ctx.strokeRect      (0, 0, 40, 10);

       

        ctx.rotate( angle_step );

         }

        

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

   <canvas id="canvas" width="100" height="100"></canvas> 

</body> 

</html> 


결과


       rotate.png

이 게시물을...