Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (scale)





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 = 'http://www.htmlya.com.ar/simulador/foto1.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);








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9745
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados