Metodo setTransform() del canvas HTML
Definizione e uso
Ogni oggetto sullo schermo ha una matrice di trasformazione corrente.
setTransform() Il metodo resetta la matrice di trasformazione corrente a matrice unitaria e poi esegue setTransform() con gli stessi parametri transform().
In altre parole, setTransform() ti permette di ingrandire, ruotare, spostare e inclinare l'ambiente corrente.
Nota:Questa trasformazione influisce solo sul disegno chiamato dopo setTransform().
Esempio
Disegna un rettangolo, riporta a zero e crea una nuova matrice di trasformazione utilizzando setTransform(), disegna di nuovo il rettangolo, riporta a zero e crea una nuova matrice di trasformazione, quindi disegna di nuovo il rettangolo. Nota che ogni volta che chiami setTransform(), resetta la matrice di trasformazione precedente e costruisce una nuova matrice, quindi nel seguente esempio, non vedrai il rettangolo rosso 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);
Sintassi
context.setTransform(a,b,c,d,e,f);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| a | Disegno di rotazione orizzontale. |
| b | Disegno di inclinazione orizzontale. |
| c | Disegno di inclinazione verticale. |
| d | Disegno di zoom 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 completamente l'attributo.
| 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>.
