Canvas transform() methode
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
transform() Methoden vervangen de huidige transformatiematrix. Het werkt met de volgende matrix:
a c e b d f 0 0 1
In andere woorden, transform() laat u de huidige omgeving schalen, draaien, verplaatsen en hellen.
Note:Deze transformatie beïnvloedt alleen de tekeningen die na de aanroep van transform() zijn gedaan.
Note:Het gedrag van de transform() methode is afhankelijk van rotate(),scale(),translate() of andere transformaties die zijn voltooid met transform(). Bijvoorbeeld: als u de tekening al twee keer hebt opgeschaald, zal de transform() methode de tekening nogmaals opschalen, waardoor de tekening uiteindelijk vier keer zo groot is.
Tip:Bekijk ook setTransform() Methoden die geen gedrag vertonen ten opzichte van andere transformaties.
Voorbeeld
Teken een rechthoek; voeg een nieuwe transformatiematrix toe via transform() en teken de rechthoek opnieuw; voeg een nieuwe transformatiematrix toe en teken de rechthoek opnieuw. Let op, elke keer dat u transform() aanroept, bouwt het 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);
Syntaxis
context.transform(a,b,c,d,e,f);
Parameterwaarde
| Parameter | Beschrijving |
|---|---|
| a | Horizontale zoom van tekeningen. |
| b | Horizontale hellingsbeweging van tekeningen. |
| c | Verticale hellingsbeweging van tekeningen. |
| d | Verticale zoom van tekeningen. |
| e | Horizontale beweging van tekeningen. |
| f | Verticale beweging van tekeningen. |
Browserondersteuning
Tabelnummers vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
