HTML canvas transform() Metode
Voorbeeld
Teken 'n reghoek, voeg 'n nuwe transformasiematriks by met transform(), teken die reghoek weer, voeg 'n nuwe transformasiematriks by, teken dan die reghoek weer. Let daarop dat elke keer as jy transform() roep, bou dit op die vorige transformasiematriks:
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);
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Elke voorwerp op die doek het 'n huidige transformasiematriks.
Die transform()-metode vervang die huidige transformasiematriks. Dit vermenigvuldig die huidige transformasiematriks met die matriks wat beskryf word deur:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Met ander woorde, die transform()-metode laat jou die huidige konteks skaal, roteer, skuif en skeeftrek.
Let wel: Die transformasie sal slegs tekeninge beïnvloed wat gemaak word nadat die transform() metode genoem is.
Let wel: Die transform()-metode optree relatief tot ander transformasies gemaak deur rotate(), scale(), translate() of transform(). Voorbeeld: As jy reeds jou tekening op skaal met twee gestel het, en die transform()-metode skaal jou tekeninge met twee, sal jou tekeninge nou met vier skaal.
Wenk: Kyk na die setTransform() metode, wat nie relatief tot ander transformasies optree nie.
| JavaScript-sintaksis: | konteks .transformeer( a,b,c,d,e,f ); |
|---|
Parameterwaardes
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML-doekverwysing