Esempio
Disegnare un rettangolo, ripristinare e creare una nuova matrice di trasformazione con setTransform() , disegnare di nuovo il rettangolo, ripristinare e creare una nuova matrice di trasformazione, quindi disegnare di nuovo il rettangolo. Si noti che ogni volta che si chiama setTransform() , che ripristina la matrice di trasformazione precedente e poi costruisce la nuova matrice, quindi nell'esempio qui sotto, il rettangolo rosso non viene mostrato, perché è sotto il rettangolo blu:
JavaScript:
var c=document.getElementById("myCanvas");
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);
Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| setTransform() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione in corso.
Il setTransform() metodo reimposta la corrente trasformazione per la matrice identità, e quindi esegue transform() con gli stessi argomenti.
In altre parole, il setTransform() metodo consente di scalare, ruotare, spostare e inclinare il contesto attuale.
Nota: La trasformazione avrà effetto solo disegni realizzati dopo il metodo setTransform viene chiamato.
| sintassi JavaScript: | context.setTransform( a,b,c,d,e,f ); |
|---|
valori dei parametri
| Parametro | Descrizione | Gioca |
|---|---|---|
| a | Scale disegni orizzontalmente | Gioca " |
| b | Distorce i disegni orizzontalmente | Gioca " |
| c | Distorce i disegni verticalmente | Gioca " |
| d | Scale disegni verticalmente | Gioca " |
| e | Sposta i disegni orizzontalmente | Gioca " |
| f | Sposta i disegni verticalmente | Gioca " |