HTML canvas transform()Método
Objeto CanvasEjemplo
Dibuja un rectángulo, agrega una nueva matriz de transformación mediante transform(), dibuja el rectángulo nuevamente, agrega una nueva matriz de transformación y luego dibuja el rectángulo otra vez. Ten en cuenta que cada vez que llamas a transform(), se construye sobre la matriz de transformación anterior:
JavaScript：
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);
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método transform().
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
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. Opera sobre la matriz de transformación actual con la matriz descrita a continuación:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
En otras palabras, transform() le permite escalar, rotar, mover e inclinar el contexto actual.
Nota:Esta transformación solo afecta al dibujo posterior a la llamada del método transform().
Nota:El comportamiento del método transform() es relativo a otras transformaciones realizadas por rotate(), scale(), translate() o transform(). Por ejemplo: si ya ha configurado el dibujo para escalarlo al doble, el método transform() escalará el dibujo al doble, y su dibujo terminará escalado a cuatro veces.
Consejo:ConsultesetTransform()el método, que no se comporta en relación con otras transformaciones.
| Sintaxis de JavaScript: | context.transform(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