Método Canvas setTransform()
Definición y uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
setTransform() El método restablece la matriz de transformación actual a la matriz de identidad y luego ejecuta setTransform() con los mismos parámetros transform().
En otras palabras, setTransform() te permite escalar, girar, mover e inclinar el entorno actual.
Nota:Esta transformación solo afecta al dibujo después de la llamada a setTransform().
Ejemplo
Dibuja un rectángulo, restablece y crea una nueva matriz de transformación con setTransform(), dibuja el rectángulo nuevamente, restablece y crea una nueva matriz de transformación, luego dibuja el rectángulo otra vez. Nota que cada vez que llamas a setTransform(), restablece la matriz de transformación anterior y construye una nueva matriz, por lo que en el siguiente ejemplo, no se mostrará el rectángulo rojo, porque está debajo del rectángulo azul:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Sintaxis
context.setTransform(a,b,c,d,e,f);
Valores de parámetros
| Parámetros | Descripción |
|---|---|
| a | Dibujo girado horizontal. |
| b | Dibujo inclinado horizontal. |
| c | Dibujo inclinado vertical. |
| d | Dibujo escalado vertical. |
| e | Dibujo de movimiento horizontal. |
| f | Dibujo de movimiento vertical. |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
