El método de rotación de lienzo HTML() se utiliza para rotar el dibujo en un ángulo dado. Tenga en cuenta que la rotación solo funcionará en aquellos lienzos que se crearon después de que se realizó la rotación.
Sintaxis:
context.rotate(angle)
Valores paramétricos:
- ángulo: Almacena el ángulo de rotación en radianes. Si el ángulo se da en forma de grado, entonces se convierte en radianes usando la fórmula grado*Math.PI/180 .
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas rotate() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG" width="500"
height="300" style="border:2px solid gray;">
</canvas>
<script>
var geeks = document.getElementById("GFG");
var contex = geeks.getContext("2d");
contex.strokeRect(100, 50, 150, 100);
contex.rotate(30 * Math.PI / 180);
contex.strokeRect(100, 50, 150, 100);
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas rotate() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG" width="500"
height="300" style="border:2px solid gray;">
</canvas>
<script>
var geeks = document.getElementById("GFG");
var contex = geeks.getContext("2d");
contex.rect(100, 100, 150, 100);//acctual rectangle
contex.stroke();
contex.rotate((-20) * Math.PI / 180);
contex.rect(100, 100, 150, 100);//rotate rectangle
contex.stroke();
</script>
</center>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Ópera