Μέθοδος HTML 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 | Κάθετη κίνηση γραφικών |
Υποστήριξη προγράμματος περιήγησης
Τα αριθμήματα στη διάταξη σηματοδοτούν την έκδοση του πρώτου προγράμματος που υποστηρίζει αυτήν την ιδιότητα.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.
