Metodo HTML canvas setTransform()
Esempio
Disegna un rettangolo, ripristina e crea una nuova matrice di trasformazione con setTransform(), disegna nuovamente il rettangolo, ripristina e crea una nuova matrice di trasformazione, quindi disegna nuovamente il rettangolo. Nota che ogni volta che chiami setTransform(), reimposta la matrice di trasformazione precedente e quindi crea la nuova matrice, quindi nell'esempio seguente il rettangolo rosso non viene mostrato, perché si trova 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);
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e utilizzo
Ogni oggetto sulla tela ha una matrice di trasformazione corrente.
Il metodo setTransform() reimposta la trasformazione corrente sulla matrice di identità, quindi esegue transform() con gli stessi argomenti.
In altre parole, il metodo setTransform() consente di ridimensionare, ruotare, spostare e inclinare il contesto corrente.
Nota: la trasformazione influirà solo sui disegni realizzati dopo il richiamo del metodo setTransform.
| sintassi JavaScript: | contesto .setTransform( a, b, c, d, e, f ); |
|---|
Valori dei parametri
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
❮ Oggetto Tela