Esempio
Disegnare un rettangolo, aggiungere una nuova matrice di trasformazione con transform() , disegnare di nuovo il rettangolo, aggiungere una nuova matrice di trasformazione, quindi disegnare di nuovo il rettangolo. Si noti che ogni volta che si chiama transform() , che si basa sulla matrice di trasformazione precedente:
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); Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| transform() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione in corso.
Il transform() metodo sostituisce la matrice di trasformazione in corso. Esso moltiplica la matrice di trasformazione corrente con la matrice descritto da:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
In altre parole, il transform() metodo consente di scalare, ruotare, spostare e inclinare il contesto attuale.
Nota: La trasformazione avrà effetto solo disegni realizzati dopo la transform() viene chiamato il metodo.
Nota: Il transform() metodo comporta relativamente ad altre trasformazioni fatte da rotate(), scale(), translate() , o transform() .Esempio: Se si è già impostato il disegno in scala per due, e la transform() metodo scala i disegni a due, i disegni saranno ora scala per quattro.
Suggerimento: Controlla la setTransform() metodo, che non si comporta relativamente alle altre trasformazioni.
| sintassi JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
valori dei parametri
| Parametro | Descrizione | Gioca |
|---|---|---|
| a | Scala il disegno orizzontale | Gioca " |
| b | Inclinare il disegno orizzontale | Gioca " |
| c | Inclinare il disegno in verticale | Gioca " |
| d | Scala il disegno in verticale | Gioca " |
| e | Sposta il disegno orizzontale | Gioca " |
| f | Sposta il disegno in verticale | Gioca " |