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>
  <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.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.tutorialesprogramacionya.com/imagenes/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>

El resultado en el navegador al cargar esta página es:

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);

Temario del Tutorial->24 - CANVAS (scale)

Retornar