EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

rotate method

Rotates the current context coordinates (that is, a transformation matrix).

HTML Canvas 2D Context, Section 3Internet Explorer 9

Syntax

CanvasRenderingContext2D.rotate(angle);

Parameters

angle [in]

Type: number

The rotation angle, in radians.

Return value

This method does not return a value.

Standards information

Remarks

Rotation is based on the current origin. Rotation is done with radians. To convert from degrees to radians use this algorithm: ([deg] * Math.PI) / 180. Substitute [deg] with the number of degrees you want.

To rotate something on its center (or a specific portion), use translate to set the origin to that point. In the example here, the origin is set to the center of the canvas. The star is drawn using that origin as its center.

When you rotate an image, wait until the image is fully loaded before calculating any rotation. This is because the width and height aren't available until the image has loaded and will result in incorrect calculations.

Examples

The following code example animates the rotation of a star by 1-degree increments. This example uses requestAnimationFrame to call the draw function repeatedly. The requestAnimationFrame is available in Internet Explorer 10 and later.

See this demo in action.


<!DOCTYPE html>

<html>
  <head>
    <title>Rotate example</title>
  <style>
    canvas {
    border:solid blue 1px;
    background-color:red;
    }
  </style>
  </head>
  <body>   
    <canvas id="MyCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas> 
  
    <script type="text/javascript">
      var canvas = document.getElementById("MyCanvas");
      var cW = canvas.width/2;
      var cH = canvas.height/2;

      //
      function draw() {
     
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear area for repeated use

          //  Set the angle between each vertex (5 internal, 5 external)
          var vertAngle = (2 * Math.PI) / 10;

          //  Size of star
          var radius = 175;

          //  Star center point
          var starCenter = [0, 0]
          
          //  Translate our coordinates so 0,0 is in the center of the canvas
          ctx.translate(cW, cH);

          //  And rotate it 1 degrees
          ctx.rotate((1 * Math.PI) / 180);

          //  Start shape, blue lines, yellow fill
          ctx.beginPath();
          
          //  Build the star hitting 10 points (11 to complete)
          for (var i = 11; i != 0; i--) {
            var r = radius * (i % 2 + 1) / 2;  // Alternate between inside and outside points
            var curAngle = vertAngle * i;  //  Calculate angle of the current point
            ctx.lineTo((r * Math.sin(curAngle)) + starCenter[0], (r * Math.cos(curAngle)) + starCenter[1]);
          }

            //  Fill and stroke
          ctx.strokeStyle = "blue";
          ctx.lineWidth = "5"
          ctx.fillStyle = "yellow";
          ctx.stroke();
          ctx.fill();

          //  Reset the translate so clearRect works correctly
          ctx.translate(-cW, -cH);
          }
       }

      animate();  //  Start animating the star

      //  Animate calls the draw function every time the system lets it draw
      function animate() {
        draw();
        //  requestAnimationFrame is a one shot function, needs to keep calling itself
        window.requestAnimationFrame(animate);
      }
    </script>

  </body>
</html>


See also

CanvasRenderingContext2D
translate

 

 

표시:
© 2014 Microsoft. All rights reserved.