Método setTransform() del canvas HTML
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 con los mismos parámetros transform().
En otras palabras, setTransform() le permite escalar, rotar, mover y inclinar el entorno actual.
Nota:Esta transformación solo afecta el dibujo después de la llamada a setTransform().
Ejemplo
Dibuje un rectángulo, restablezca y cree una nueva matriz de transformación con setTransform(), dibuje el rectángulo nuevamente, restablezca y cree una nueva matriz de transformación, luego dibuje el rectángulo otra vez. Tenga en cuenta que, cada vez que llama 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 de rotación horizontal. |
| b | Dibujo de inclinación horizontal. |
| c | Dibujo de inclinación vertical. |
| d | Dibujo de 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 por primera vez.
| 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>.
