HTML canvas transform() Metodo
Esempio
Disegna un rettangolo, aggiungi una nuova matrice di trasformazione con transform(), disegna di nuovo il rettangolo, aggiungi una nuova matrice di trasformazione, quindi disegna di nuovo il rettangolo. Nota che ogni volta che chiami transform(), 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);
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definizione e utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione corrente.
Il metodo transform() sostituisce la matrice di trasformazione corrente. Moltiplica la matrice di trasformazione corrente con la matrice descritta da:
| un | C | e |
| B | D | F |
| 0 | 0 | 1 |
In altre parole, il metodo transform() ti consente di ridimensionare, ruotare, spostare e inclinare il contesto corrente.
Nota: la trasformazione influirà solo sui disegni creati dopo che il metodo transform() è stato chiamato.
Nota: il metodo transform() si comporta relativamente ad altre trasformazioni effettuate da rotate(), scale(), translate() o transform(). Esempio: se hai già impostato il tuo disegno in scala di due e il metodo transform() ridimensiona i tuoi disegni di due, i tuoi disegni ora verranno ridimensionati di quattro.
Suggerimento: controlla il metodo setTransform() , che non si comporta relativamente ad altre trasformazioni.
| sintassi JavaScript: | contesto .transform( a,b,c,d,e,f ); |
|---|
Valori dei parametri
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Riferimento tela HTML