Método HTML canvas transform()
Definición y uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
transform() Método reemplaza la matriz de transformación actual. Opera sobre la matriz de transformación actual con la siguiente matriz:
a c e b d f 0 0 1
En otras palabras, transform() le permite escalar, girar, mover e inclinar el entorno actual.
Notas:Esta transformación solo afectará al dibujo después de la llamada al método transform().
Notas:El comportamiento del método transform() es relativo a rotate()、scale()、translate() o otras transformaciones realizadas con transform(). Por ejemplo: si ya ha configurado el dibujo para duplicarlo dos veces, el método transform() duplicará el dibujo dos veces, y su dibujo final se duplicará cuatro veces.
Consejo:Vea setTransform() Método, que no se comportará en relación con otras transformaciones.
Ejemplo
Dibuje un rectángulo; agregue una nueva matriz de transformación usando transform() y dibuje el rectángulo nuevamente; agregue otra matriz de transformación y dibuje el rectángulo nuevamente. Tenga en cuenta que cada vez que llama a transform(), construye sobre la matriz de transformación anterior:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Sintaxis
context.transform(a,b,c,d,e,f);
Valores de parámetros
| Parámetros | Descripción |
|---|---|
| a | Dibujo de escalado 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.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
