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, y luego 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 del 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() | 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 transform() método reemplaza la matriz de transformación actual. Se multiplica la matriz de transformación actual con la matriz descrito por:
| un | do | mi |
| segundo | re | F |
| 0 | 0 | 1 |
En otras palabras, la transform() método le permite escalar, rotar, mover y sesgar el contexto actual.
Note: La transformación sólo afectará a los dibujos realizados después de la transform() se llama al método.
Note: 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 escalas de sus dibujos en dos, sus dibujos A continuación escala por cuatro.
Tip: Salida del setTransform() método, que no se comporta relativamente 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 el dibujo horizontalmente | Juegalo " |
| c | Sesgar el dibujo de la vertical | Juegalo " |
| d | Escala el dibujo verticalmente | Juegalo " |
| e | Mueve el el dibujo horizontalmente | Juegalo " |
| f | Mueve el dibujo de la vertical | Juegalo " |
<Objeto Canvas