Μέθοδος Canvas setTransform()
Ορισμός και χρήση
Κάθε αντικείμενο στο καμβά έχει έναν τρέχοντα μετασχηματιστή.
setTransform() Μέθοδος επαναφέρει τον τρέχοντα μετασχηματιστή στο μάρτυρα μονάδας και τότε εκτελεί με τους ίδιους παραμέτρους transform().
Με άλλες λέξεις, το setTransform() επιτρέπει να κλιμακώσετε, περιστρέψετε, μετακινήσετε και γωνιακά μεταμορφώσετε το τρέχον περιβάλλον.
Σημείωση:Αυτός ο μετασχηματισμός επηρεάζει μόνο τη σχεδίαση μετά από την κλήση του setTransform().
Παράδειγμα
Σχεδιάστε ένα τετράγωνο, χρησιμοποιώντας το setTransform() για να επαναφέρετε και να δημιουργήσετε νέα μετασχηματιστική μάρτυρα, σχεδιάστε το τετράγωνο ξανά, επαναφέρετε και δημιουργήστε νέο μετασχηματιστική μάρτυρα και τότε σχεδιάστε το τετράγωνο ξανά. Σημειώστε ότι κάθε φορά που καλείτε το setTransform(), επαναφέρει τον προηγούμενο μετασχηματιστή και δημιουργεί νέο μάρτυρα, οπότε δεν θα δείτε το κόκκινο τετράγωνο,因为它 находится под синим прямоугольником:
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);
Γλώσσα
context.setTransform(a,b,c,d,e,f);
Τιμή παράμετρος
| Παράμετροι | Περιγραφή |
|---|---|
| a | Οριζόντια περιστροφή σχεδίασης. |
| b | Οριζόντια γωνιακή σχεδίαση. |
| c | Κατακόρυφη γωνιακή σχεδίαση. |
| d | Κατακόρυφη κλίμακα σχεδίασης. |
| e | Οριζόντια κίνηση σχεδίασης |
| f | Κατακόρυφη κίνηση σχεδίασης |
Υποστήριξη Browser
Οι αριθμοί στη τράπεζα αναφέρουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Οι εκδόσεις Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.
