Exemplu
Desenați un dreptunghi, se adaugă o nouă matrice de transformare cu transform() , trage din nou dreptunghi, se adaugă o nouă matrice de transformare, apoi se trage din nou dreptunghi. Observați că de fiecare dată când suni transform() , se bazează pe matricea de transformare anterioară:
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); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| transform() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
Fiecare obiect pe panza are o matrice de transformare curent.
transform() metoda înlocuiește matricea de transformare curentă. Se înmulțește matricea de transformare curent cu matricea descrisă de:
| A | c | e |
| b | d | f |
| 0 | 0 | 1 |
Cu alte cuvinte, transform() metoda permite scala, roti, muta, și decalarea contextul actual.
Note: Transformarea va afecta numai desene realizate după transform() metoda este apelata.
Note: transform() Metoda se comportă relativ la alte transformări realizate de rotate() , scale() , translate() , sau transform() . Exemplu: Dacă ați setat deja desenul la scară de două, și transform() metoda scalează desenele de două, desenele dvs. vor fi acum la scară de patru.
Tip: Check out setTransform() metoda, care nu se comportă relativ la alte transformări.
| sintaxa JavaScript: | context . transform( a,b,c,d,e,f ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| a | Scalează desenul orizontal | Joaca - l » |
| b | Distorsiona desenul orizontal | Joaca - l » |
| c | Distorsiona desenului vertical | Joaca - l » |
| d | Scales desenul vertical | Joaca - l » |
| e | Mută desenul orizontal | Joaca - l » |
| f | Mută desenul de pe verticală | Joaca - l » |
<Canvas obiect