Otra transformación que nos permite la librería
provista por el canvas es la redimensión.
Disponemos de un método llamado: scale(x,y)
Si pasamos 1 y 1 el gráfico toma el mismo tamaño
que el original. Si es menor a uno estamos reduciendo y en caso de ser mayor a
1 estamos generando una figura mayor a la original.
Confeccionaremos un programa que muestre una
imagen girando y en cada giro iremos escalando (aumentando su tamaño):
<!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.translate(300,300);
lienzo.rotate(avance);
lienzo.scale(tamx,tamy);
lienzo.drawImage(img1,-125,-125);
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
if (avance>Math.PI*2)
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}
var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
img1 = new Image();
img1.src = 'image.jpg';
img1.onload = function(){
setInterval(dibujar,50);
}
}
</script>
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
Cada vez que se ejecuta la función dibujar:
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.scale(tamx,tamy);
lienzo.drawImage(img1,-125,-125);
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
if (avance>Math.PI*2)
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}
Dentro de esta función rotamos según el contador
avance y escalamos según otros dos contadores:
lienzo.rotate(avance);
lienzo.scale(tamx,tamy);
No hay comentarios:
Publicar un comentario