HTML canvas transform() Methode
Voorbeeld
Teken een rechthoek, voeg een nieuwe transformatiematrix toe met transform(), teken de rechthoek opnieuw, voeg een nieuwe transformatiematrix toe en teken de rechthoek opnieuw. Merk op dat elke keer dat u transform() aanroept, het voortbouwt op de vorige transformatiematrix:
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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
De methode transform() vervangt de huidige transformatiematrix. Het vermenigvuldigt de huidige transformatiematrix met de matrix beschreven door:
| een | C | e |
| B | D | F |
| 0 | 0 | 1 |
Met andere woorden, met de methode transform() kunt u de huidige context schalen, roteren, verplaatsen en scheeftrekken.
Opmerking: de transformatie is alleen van invloed op tekeningen die zijn gemaakt nadat de methode transform() is aangeroepen.
Opmerking: De methode transform() gedraagt zich relatief ten opzichte van andere transformaties die zijn gemaakt door roteren(), scale(), translate() of transform(). Voorbeeld: Als u uw tekening al op schaal van twee hebt ingesteld en de methode transform() uw tekeningen met twee schaalt, worden uw tekeningen nu met vier geschaald.
Tip: bekijk de methode setTransform() eens , die zich niet gedraagt ten opzichte van andere transformaties.
| JavaScript-syntaxis: | context .transform( a,b,c,d,e,f ); |
|---|
Parameterwaarden
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML Canvas-referentie