HTML reference manual

HTML tag大全

HTML canvas rotate() method

rotate() is a Canvas 2D API adds a rotation method to the transformation matrix. The angle variable represents a clockwise rotation angle and is expressed in radians.

HTML canvas reference manual

Online example

Rotate the square 30 degrees:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas rotate() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(10*Math.PI/180);
ctx.fillRect(50,50,100,100);
</script>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support rotate() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The rotate() method rotates the current drawing.

Note:Rotation will only affect the engineering drawing created after rotation.

JavaScript syntax:	context.rotate(angle);

Parameter value

Parameter	Description
angle	Rotation angle, in radians. To convert degrees to radians, please use degreesMath.PI/180 formula for calculation. Example: To rotate 5 degrees, the following formula can be specified:5Math.PI/180.

HTML canvas reference manual

HTML: <template> tag