Exemplu
Desenați un dreptunghi, reset și de a crea o nouă matrice de transformare cu setTransform() , trage din nou dreptunghi, reset și a crea o nouă matrice de transformare, apoi se trage din nou dreptunghi. Observați că de fiecare dată când apelați setTransform() , se resetează matricea de transformare anterioară și apoi construiește noua matrice, astfel încât în exemplul de mai jos, dreptunghiul roșu nu este afișat, deoarece este sub dreptunghi albastru:
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);
Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| setTransform() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
Fiecare obiect pe panza are o matrice de transformare curent.
setTransform() Metoda resetează curentul transforma la matricea de identitate, și apoi se execută transform() cu aceleași argumente.
Cu alte cuvinte, setTransform() metoda permite scala, roti, muta, și decalarea contextul actual.
Note: Transformarea va afecta numai desene realizate după metoda setTransform se numește.
| sintaxa JavaScript: | context . setTransform( a,b,c,d,e,f ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| a | Scales desenele orizontal | Joaca - l » |
| b | Skews desenele orizontal | Joaca - l » |
| c | Skews desenele vertical | Joaca - l » |
| d | Scales desenele vertical | Joaca - l » |
| e | Mută desenele orizontal | Joaca - l » |
| f | Mută desenele vertical | Joaca - l » |
<Canvas obiect