Método de transformación de lienzo Canvas
Definición y uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
transform() El 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, rotar, mover e inclinar el entorno actual.
Notas:Esta transformación solo afectará al dibujo posterior a 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 aumentado el dibujo dos veces, el método transform() aumentará el dibujo dos veces más, por lo que el dibujo final será cuatro veces más grande.
Consejo:Consulte 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 mediante 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 los parámetros
| Parámetros | Descripción |
|---|---|
| a | Dibujo de escala horizontal |
| b | Dibujo de inclinación horizontal |
| c | Dibujo de inclinación vertical |
| d | Dibujo de escala vertical |
| e | Dibujo de movimiento horizontal |
| f | Dibujo de movimiento vertical |
Compatibilidad del navegador
La tabla de números indica la versión del navegador que admite completamente esta propiedad por primera vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Los navegadores Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
