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() | Yes | 9.0 | Yes | Yes | Yes |
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 | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Referencia de lienzo HTML