HTML -doekstelTransformeer () Metode
Voorbeeld
Teken 'n reghoek, stel terug en skep 'n nuwe transformasiematriks met setTransform(), teken die reghoek weer, stel terug en skep 'n nuwe transformasiematriks, teken dan weer die reghoek. Let daarop dat elke keer as jy setTransform() oproep, stel dit die vorige transformasiematriks terug en bou dan die nuwe matriks, so in die voorbeeld hieronder word die rooi reghoek nie gewys nie, want dit is onder die blou reghoek:
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);
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Elke voorwerp op die doek het 'n huidige transformasiematriks.
Die setTransform()-metode stel die huidige transformasie terug na die identiteitsmatriks, en loop dan transform() met dieselfde argumente.
Met ander woorde, die setTransform()-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 setTransform-metode opgeroep is.
| JavaScript-sintaksis: | konteks .setTransform( 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