CanvasRenderingContext2D.transform()


         html5.jpg



설명


    캔퍼스에 이전에 적용된 변환 행렬 적용 값을 기준으로 새로운 변형 행렬 값을 설정합니다.


분류


    변형 API


형태


    void CanvasRenderingContext2D.transform

                          (in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);


인수


    in     float     m11     

    in     float     m12     

    in     float     m21     

    in     float     m22     

    in     float     dx       

    in     float     dy       


    아래 표 참조



     HTML5_transform_01.png


반환


    없음


예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

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

      if (canvas.getContext) { 

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

 

         var sin = Math.sin(Math.PI/6);  

         var cos = Math.cos(Math.PI/6);  

    

         ctx.translate(200, 200);  

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

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

 

         for (var i=0; i <= 12; i++) {  

                ctx.fillRect(0, 0, 100, 100);  

               ctx.strokeRect (0, 0, 100, 100); 

                ctx.transform(cos, sin, -sin, cos, 0, 0);  

         }  

      }

    }

   </script> 

</head> 

<body onload="draw();"> 

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

</body> 

</html> 


결과


           HTML5_transform_02.png

이 게시물을...