Μέθοδος scale() του καμβά
Ορισμός και χρήση
scale() Μέθοδος ανάπτυξης της τρέχουσας εικόνας, μεγαλύτερη ή μικρότερη.
Σημείωση:Αν αναπτυχθεί η εικόνα, όλες οι επόμενες εικόνες θα αναπτυχθούν επίσης. Η τοποθέτηση θα αναπτυχθεί επίσης. Αν γράψετε scale(2,2)τότε η τοποθέτηση της εικόνας θα είναι δύο φορές μακριά από το πάνω αριστερό όριο του καμβά.
Παράδειγμα
Παράδειγμα 1
Δημιουργία παραλληλόγραμμου, μεγέθυνση 200%, και πάλι δημιουργία παραλληλόγραμμου:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Σημείωση:Περισσότερα παραδείγματα στην κορυφή της σελίδας.
Γλώσσα
context.scale(scalewidth,scaleheight);
Τιμή παράμετρου
| Παράμετρος | Περιγραφή |
|---|---|
| scalewidth | Ανάπτυξη της τρέχουσας εικόνας (1=100%, 0.5=50%, 2=200%, κ.λπ.). |
| scaleheight | Ανάπτυξη της τρέχουσας εικόνας (1=100%, 0.5=50%, 2=200%, κ.λπ.). |
Περισσότερα παραδείγματα
Παράδειγμα 2
Δημιουργία παραλληλόγραμμου; Μεγέθυνση 200%, και πάλι δημιουργία παραλληλόγραμμου; Μεγέθυνση 200%, και πάλι δημιουργία παραλληλόγραμμου; Μεγέθυνση 200%, και πάλι δημιουργία παραλληλόγραμμου:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Υποστήριξη περιηγητών
Τα αριθμήματα στη διάταξη δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Οι εκδόσεις Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.
