Transformaciones

Ya sabes como guardar el estado del canvas antes de apllicar cambios y como restaurarlo después. Veamos ahora las posibles transformaciones que puedes utilizar en tus dibujos dentro del elemento canvas.

 

Scale: Cambiar escala

Este método modifica la escala de dibujo usada en el canvas. Así cualquier dibujo que hagas verá modificadas su anchura y altura así como las coordenadas del punto donde se dibuje.

Si imaginas que el canvas es un papel cuadrículado, el método scale() aumenta o disminuye el tamaño de las cuadrículas. Este cambio afecta por separado al ancho y al alto, con lo cual se puede deformar el dibujo y, por ejemplo, convertir una circunferencia en una elipse.

Este método posee dos argumentos: el primero multiplica al ancho y el segundo al alto.

scale(factorAncho, factorAlto)

En este ejemplo creamos un circulo rojo de radio 80 y en la posición X=300, Y=150. Al aplicar el método scale(1,0.5) multipliamo el ancho por 1 (no cambia) y el alto por 0.5 (altura a la mitad) y a continuación se dibuja. Verás que el centro estará en X=300 Y=75 (no en 150), pues las coordenadas verticales se han multiplicaod po 0.5, la escala también afecta a las coordenadas.

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
		var miLienzo = document.getElementById("mipanel");
		var lapiz = miLienzo.getContext("2d");
		lapiz.scale(1, 0.5)
		lapiz.beginPath();
		lapiz.fillStyle = "red";
		lapiz.arc(300,150,80, 0, 2*Math.PI);
		lapiz.fill();
		lapiz.stroke();
</script> 
Prueba este código

Si vuelves a aplicar este método los cambios se harán sobre los valores actuales, no sobre los originales. Es decir si vuelves a hacer un scale(1, 0.5) la escala vertical será ahora 0.25 (0.5x0.5). Las transformaciones son relativas al estado actual del canvas.