Esempio
Disegnare un rettangolo, ripristinare e creare una nuova matrice di trasformazione con setTransform() , richiamare 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() , azzera la matrice di trasformazione precedente e quindi costruisce la nuova matrice, così nell'esempio qui sotto, il rettangolo rosso non è 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 browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione corrente.
Il setTransform() metodo reimposta la corrente trasformazione alla 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.
Note: La trasformazione influenzerà solo prelievi effettuati 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 | Inclina disegni orizzontalmente | Gioca " |
| c | Inclina disegni verticalmente | Gioca " |
| d | Scale disegni verticalmente | Gioca " |
| e | Muove le figure orizzontalmente | Gioca " |
| f | Sposta i disegni verticalmente | Gioca " |
<Oggetto Tela