タグの編集...

CanvasRenderingContext2D.Rotate(English)

CanvasRenderingContext2D >

rotate method

Rotate graphics which will be drawn.

１．Syntax

void rotate(double angle);

■リスト1:

Parameter

angle

Specify rotation angle by radian. Graphics which will be drawn will rotate clockwise.

２．Note

Invoking this method changes current transformation matrix, therefore graphics which will be drawn will rotate. For example you can draw graphics which is rotated 30 degrees or 60 degrees around the origin of coordinates. You can set minus value to angle parameter to rotate anti-clockwise.

Graphics which is already there are not affected. Graphics which will be drawn will be affected.

The origin of coordinates is top-left of the canvas initially. You can set the origin of coordinates to use translate method. For example translate(100,100) moves the origin of coordinates to point (100,100), so the rotate method will refer point(100,100) as the origin of coordinates.

As the transformation matrix which rotate method changes is independent from the rotate method, It's accumulative to use the multiple rotate method. Invoking rorate(1) adds 1 radian rotation to the transformation matrix, so Invoking twice of rorate(1) means 2 radians rotation as a result.

You can use setTransform(1, 0, 0, 1, 0, 0) to change the transformation matrix to default. You can save the matrix and restore matrix using save method or restore method.

This is the list of methods which uses the transformation matrix.

fillRect method
strokeRect method
fillText method
strokeText method
moveTo method
lineTo method
quadraticCurve method
bezierCurve method
arcTo method
rect method
arc method

This is the list of methods which changes the transformation matrix except for rotate method.

scale method
translate method
transform method
setTransform method

３．Example

This sample shows triple rotation the character "竜" 30 degrees.

rotate1

rotate sample

var canvas1 = document.getElementById('Canvas1');
var ctx = canvas1.getContext('2d');

ctx.font = '24pt Meiryo'
ctx.fillText('竜', 100, 40);

//Set 30 degrees raotation to the transformation matrix
ctx.rotate(30 * Math.PI / 180);
ctx.fillText('竜', 100, 40);

//Set 30 degrees raotation to the transformation matrix(total 60 degrees)
ctx.rotate(30 * Math.PI / 180);
ctx.fillText('竜', 100, 40);

■リスト2:

Following sample shows moving the origin of coordinates to point (100,100), and rotated circle around the point.

var canvas1 = document.getElementById('Canvas1');
var ctx = canvas1.getContext('2d');

//Move the origin of coordinates to point (100, 100) -> after this, point (100,100) become the origin of coordinates.
ctx.translate(100, 100);

//Draw point on the origin of coordinates.
ctx.fillRect(-1, -1, 2, 2);

//Draw circle around point (50, 0)
ctx.beginPath();
ctx.arc(50, 0, 10, 0, Math.PI * 2);
ctx.fill();

//Set 120 degrees raotation to the transformation matrix
ctx.rotate(120 * Math.PI / 180);

//Draw circle around point (50, 0)
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 0, 10, 0, Math.PI * 2);
ctx.fill();

■リスト3:

Following sample shows complex circulative animation using rotate method.

Sample Page

rotateDemo