La segunda transformación posible utilizando el canvas es la rotación:
rotate(grados)
Los grados de rotación se indican en radianes y la rotación es en sentido horario y con respecto al punto de origen (0,0), por ello es muy común que primero utilicemos el método translate y luego rotemos.
Confeccionaremos un programa que rote un cuadrado en forma indefinida:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.fillStyle="rgb(255,0,0)";
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.fillRect(-100,-100,200,200);
lienzo.restore();
avance+=0.05;
if (avance>Math.PI*2)
avance=0;
}
}
var avance=0;
function inicio() {
setInterval(dibujar,50);
}
</script>
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Definimos una variable global que indica el grado de rotación actual:
var avance=0;
function inicio() {
setInterval(dibujar,50);
}
La función dibujar se ejecuta cada 50 milisegundos. Lo primero que hacemos el borrar el lienzo, trasladar el punto de origen a la coordenada (300,300) que es el centro del canvas. Definimos los grados de rotación. Dibujamos un cuadrado teniendo en cuenta la ubicación actual del punto de origen (por eso los parámetros negativos en x1 e y1):
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.fillStyle="rgb(255,0,0)";
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.fillRect(-100,-100,200,200);
lienzo.restore();
avance+=0.05;
if (avance>Math.PI*2)
avance=0;
}
}