Metodo HTML canvas transform()
Definizione e uso
Ogni oggetto sullo schermo ha una matrice di trasformazione corrente.
transform() Il metodo replace la matrice di trasformazione corrente. Operazione sulla matrice di trasformazione corrente con la seguente matrice:
a c e b d f 0 0 1
In altre parole, transform() ti permette di scalare, ruotare, spostare e inclinare l'ambiente corrente.
Nota:Questa trasformazione influenzerà solo il disegno successivo al chiamare transform().
Nota:Il comportamento del metodo transform() è relativo a rotate()escale()etranslate() o altre trasformazioni eseguite con transform(). Ad esempio: se hai già impostato il disegno a due volte, il metodo transform() ingrandirà il disegno di due volte, quindi il tuo disegno finale sarà ingrandito di quattro volte.
Suggerimento:Vedi anche setTransform() Metodo, che non si comporta relativamente ad altre trasformazioni.
Esempio
Disegna un rettangolo; aggiungi una nuova matrice di trasformazione con transform() e disegna di nuovo il rettangolo; aggiungi una nuova matrice di trasformazione e disegna di nuovo il rettangolo. Nota che ogni volta che chiama transform(), costruisce la 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);
Sintassi
context.transform(a,b,c,d,e,f);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| a | Disegno di scalatura orizzontale. |
| b | Disegno di inclinazione orizzontale. |
| c | Disegno di inclinazione verticale. |
| d | Disegno di scalatura verticale. |
| e | Disegno di movimento orizzontale. |
| f | Disegno di movimento verticale. |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
