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>
<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>
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;
}
}
PROBLEMA PROPUESTO
Mostrar una imagen y efectuar su
rotación en forma indefinida.
No hay comentarios:
Publicar un comentario