Método HTML canvas transform()
Ejemplo
Dibuje un rectángulo, agregue una nueva matriz de transformación con transform(), dibuje el rectángulo nuevamente, agregue una nueva matriz de transformación y luego dibuje el rectángulo nuevamente. Tenga en cuenta que cada vez que llama a transform(), se basa en 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);
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
El método transform() reemplaza la matriz de transformación actual. Multiplica la matriz de transformación actual por la matriz descrita por:
| a | C | mi |
| B | D | F |
| 0 | 0 | 1 |
En otras palabras, el método transform() le permite escalar, rotar, mover y sesgar el contexto actual.
Nota: La transformación solo afectará a los dibujos realizados después de llamar al método transform().
Nota: El método transform() se comporta de manera relativa a otras transformaciones realizadas por giratorio(), escala(), traducir() o transformar(). Ejemplo: si ya configuró su dibujo para escalar por dos, y el método transform() escala sus dibujos por dos, sus dibujos ahora se escalarán por cuatro.
Sugerencia: consulte el método setTransform() , que no se comporta de manera relativa a otras transformaciones.
| Sintaxis de JavaScript: | contexto .transform( a, b, c, d, e, f ); |
|---|
Valores paramétricos
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | |
| b | Skew the the drawing horizontally | |
| c | Skew the the drawing vertically | |
| d | Scales the drawing vertically | |
| e | Moves the the drawing horizontally | |
| f | Moves the the drawing vertically |
❮ Objeto de lienzo