Ejemplo
Dibujar un rectángulo, añadir una nueva matriz de transformación con transform() , dibujar el rectángulo de nuevo, añadir una nueva matriz de transformación, a continuación, dibujar el rectángulo de nuevo. Tenga en cuenta que cada vez que se llama 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); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| transform() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
Cada objeto en el lienzo tiene una matriz de transformación actual.
La transform() método reemplaza la matriz de transformación actual. Se multiplica la matriz de transformación actual con la matriz descrita por:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
En otras palabras, la transform() método le permite escalar, rotar, mover y sesgar el contexto actual.
Nota: La transformación sólo afectará a los dibujos realizados después de la transform() se llama al método.
Nota: La transform() método se comporta relativamente a otras transformaciones realizadas por rotate(), scale(), translate() , o transform() .Ejemplo: Si ya ha configurado su dibujo a escala en dos, y la transform() método de las escalas de sus dibujos en dos, sus dibujos A continuación escala por cuatro.
Tip: Salida del setTransform() método, que no se comporta con relación a otras transformaciones.
| la sintaxis de JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
Los valores de los parámetros
| Parámetro | Descripción | Juegalo |
|---|---|---|
| a | Escala el dibujo horizontalmente | Juegalo " |
| b | Sesgar el dibujo del horizontalmente | Juegalo " |
| c | Sesgar el dibujo de la vertical | Juegalo " |
| d | Escala el dibujo verticalmente | Juegalo " |
| e | Mueve el dibujo del horizontalmente | Juegalo " |
| f | Mueve el dibujo de la vertical | Juegalo " |