Esempio
Disegnare un rettangolo, aggiungere una nuova matrice di trasformazione con transform() , richiamare 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() , si basa sul precedente matrice di trasformazione:
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 browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione corrente.
La transform() metodo sostituisce la matrice di trasformazione corrente. Moltiplica la matrice di trasformazione corrente con la matrice descritto da:
| un | c | e |
| B | d | f |
| 0 | 0 | 1 |
In altre parole, il transform() metodo consente di scalare, ruotare, spostare e inclinare il contesto attuale.
Note: La trasformazione influenzerà solo prelievi effettuati dopo la transform() metodo viene chiamato.
Note: La transform() metodo comporta relativamente ad altre trasformazioni effettuate da rotate() , scale() , translate() , o transform() . Esempio: Se avete già impostato il disegno in scala a due, e la transform() metodo scala i disegni a due, i vostri disegni sarà ora scala per quattro.
Tip: 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 orizzontalmente | Gioca " |
| b | Inclinare il disegno orizzontalmente | Gioca " |
| c | Inclinare il disegno verticalmente | Gioca " |
| d | Scala il disegno verticalmente | Gioca " |
| e | Sposta il disegno orizzontalmente | Gioca " |
| f | Sposta il disegno verticalmente | Gioca " |
<Oggetto Tela