HTML canvas setTransform()Método
Objeto CanvasEjemplo
Dibuja un rectángulo, mediante setTransform() reinicia y crea una nueva matriz de transformación, dibuja nuevamente un rectángulo, reinicia y crea una nueva matriz de transformación, y luego dibuja un rectángulo otra vez. Ten en cuenta que cada vez que se llama a setTransform(), se restablece la matriz de transformación anterior y luego se construye una nueva matriz, por lo que en el siguiente ejemplo, el rectángulo rojo no se mostrará porque está debajo del rectángulo azul:
JavaScript：
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);
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método setTransform().
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
El método setTransform() restablece la matriz de transformación actual a la matriz de identidad y luego se ejecuta con los mismos parámetros.transform()。
En otras palabras, setTransform() le permite escalar, rotar, mover e inclinar el entorno actual.
Nota:Esta transformación solo afecta a los dibujos posteriores a la llamada del método setTransform().
| Sintaxis de JavaScript: | context.setTransform(a,b,c,d,e,f); |
|---|
Valores de parámetros
| Parámetro | Descripción |
|---|---|
| a | Escala horizontalmente el dibujo. |
| b | Inclina horizontalmente el dibujo. |
| c | Inclina verticalmente el dibujo. |
| d | Escala verticalmente el dibujo. |
| e | Mueve horizontalmente el dibujo. |
| f | Mueve verticalmente el dibujo. |
Otras extensiones