Μέθοδος transform() του HTML canvas
Ορισμός και χρήση
Κάθε αντικείμενο στο canvas έχει μια τρέχουσα μatrία μετατροπής.
transform() Μέθοδος αντικατάστασης της τρέχουσας μatrίας μετατροπής. Επεξεργάζεται τη τρέχουσα μatrία μετατροπής με τη χρήση της παρακάτω μatrίας:
a c e b d f 0 0 1
Με άλλα λόγια, η transform() σας επιτρέπει να κλιμακώσετε, να γυρίσετε, να μετακινήσετε και να κατραπικάλετε το τρέχον περιβάλλον.
Σημείωση:Αυτή η μετατροπή επηρεάζει μόνο τη γραφική απεικόνιση που ακολουθεί τη καλείnte transform().
Σημείωση:Η συμπεριφορά της μεθόδου transform() σχετίζεται με rotate()καιscale()καιtranslate() ή άλλες μετατροπές που γίνονται με transform(). Για παράδειγμα: Αν έχετε ήδη ρυθμίσει τη γραφική απεικόνιση σε διπλάσια κλίμακα, η μέθοδος transform() θα μεγαλώσει τη γραφική απεικόνιση διπλάσια, και η τελική γραφική απεικόνιση θα είναι τετραπλάσια.
Συμβουλή:Παρακαλώ δείτε setTransform() Μέθοδος που δεν προκαλεί συμπεριφορά σε σχέση με άλλες μετατροπές.
Παράδειγμα
Δημιουργία ενός ορθογώνιου; Προσθήκη μιας νέας μatrίας μετατροπής μέσω της transform(), επανγραφίδα του ορθογώνιου; Προσθήκη μιας νέας μatrίας μετατροπής και επανγραφίδα του ορθογώνιου. Λάβετε υπόψη ότι κάθε φορά που καλείτε τη transform(), δημιουργεί μια νέα μatrία μετατροπής πάνω στην προηγούμενη:
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);
Γραμματική
context.transform(a,b,c,d,e,f);
Αξία παράμετρος
| Παράμετροι | Περιγραφή |
|---|---|
| a | Κατανομή πιεζής κατά τοίχους |
| b | Κλίση κατά τοίχους |
| c | Κλίση κατά τοίχους |
| d | Κατανομή πιεζής κατά τοίχους |
| e | Κατανομή πιεζής κατά τοίχους |
| f | Κατανομή πιεζής κατά τοίχους |
Υποστήριξη προγράμματος περιήγησης
Ο αριθμός στην τаблицή σημαίνει την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα πλήρως.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Ο Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.
