Lienzo HTML setTransform () Método
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 nuevamente. Tenga en cuenta que cada vez que llama a setTransform(), restablece la matriz de transformación anterior y luego construye la nueva matriz, por lo que en el siguiente ejemplo, el rectángulo rojo no se muestra 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);
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 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 setTransform() restablece la transformación actual a la matriz de identidad y luego ejecuta transform() con los mismos argumentos.
En otras palabras, el método setTransform() 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 setTransform.
| Sintaxis de JavaScript: | contexto .setTransform( a, b, c, d, e, f ); |
|---|
Valores paramétricos
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
❮ Objeto de lienzo