Antes de continuar conociendo las posibilidades que nos brinda esta etiqueta, recordemos los posibles valores para las transformaciones:
-Translate (permite trasladar un objeto de su posición real)
-Scale (permite escalar un objeto a una proporción mayor o menor de la real)
-Rotar (permite rotar un elemento)
-Custom Transform (permite crear transformaciones personalizadas, sumando varias opciones de transformación)
-Shear (permite cortar un elemento)
-Mirror (permite reflejar un elemento, ya se en forma horizontal como vertical)
-Reset Transform (permite resetear una transformación)
-State Stack
-Oval
Ya vimos cómo manejar las traslaciones mediante: context.translate(), ahora aprenderemos cómo realizar transformaciones de escala haciendo uso del método scale.
Transformaciones de escala
Si lo que buscamos hacer es una transformación de escala, debemos utilizar el método scale(), mediante el cual podremos aplicar escala de X, de Y o bien ambas juntas. Veamos un ejemplo de código para poder comprender mejor este método:
<canvas id=”escala” width=”700”
height=”200”></canvas>
<script> var canvas = document.getElementById(‘escala’);
var context = canvas.getContext(‘2d’);
var rectWidth = 350; var rectHeight = 95;
// Permite centrar el canvas context.translate(canvas.width / 2, canvas.height / 2);
// componente de escala de y context.scale(1, 0.5);
context.fillStyle = ‘blue’;
context.fillRect(rectWidth / -2, rectHeight / -2, rect
Width, rectHeight);
</script>
De esta forma, haciendo uso de la sentencia context.scale(1, 0.5) logramos que el elemento reciba una escala de 0,5 en Y, es decir qué tendrá el mismo ancho pero su altura se reducirá a la mitad. Esto se debe a los parámetros que usamos dentro del paréntesis del método scale (1, 0.5).
Allí, el primer valor aplica al eje X, y como está establecido en “1” no se verá afectado; el segundo valor corresponde al eje Y, como su valor es “0,5” se verá reducido a la mitad. Si en otro caso quisiéramos que el elemento duplique tanto su ancho como su alto deberíamos usar context.scale(2); de esta forma aplicaría un valor de 2 tanto al eje de las X como al eje de las Y.
