Addd the rotation transformation described by the argument to the transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.
Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D
Syntaxvar object = object.rotate(angle);
The rotation angle, in radians.
Return ValueReturns an object of type DOM NodeDOM Node
Type: HRESULT
If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.
ExamplesThis basic example draws two rects, the second rotated 45°, converted to radians
ctx.translate(120,120);
ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.rotate((Math.PI/180) * 45);
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(0,0,100,100);
This full example draws two rects, the second rotated 45°
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<script>
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.translate(120,120);
ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.rotate((Math.PI/180) * 45);
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(0,0,100,100);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
Rotation is based on the current origin which is most of the time the upper left corner. Use rectWidth/-2 as an offsetX and rectHeight/-2 as offsetY to draw the rotated rect with a centered origin.
Related specificationsMicrosoft Developer Network: Windows Internet Explorer API reference Article
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4