Μέθοδος clip() του HTML canvas
Ορισμός και χρήση
clip() Η μέθοδος κόβει οποιαδήποτε μορφή και μέγεθος από το αρχικό καanvas.
Συμβουλή:Μόλις κόψετε μια περιοχή, όλες οι επόμενες γραφικές πράξεις θα περιοριστούν στην περιοχή που κόπηκε (δεν μπορείτε να προσέξετε άλλες περιοχές του καanvas). Μπορείτε επίσης να αποθηκεύσετε την τρέχουσα περιοχή του καanvas χρησιμοποιώντας τη μέθοδο save() και να την ανακτήσετε αργότερα (χρησιμοποιώντας τη μέθοδο restore()).
Παράδειγμα
Από το καanvas κόψτε ένα τετράγωνο τμήμα 200*120 εικονοστοιχεία. Στη συνέχεια, σχεδιάστε ένα πράσινο τετράγωνο. Μόνο η περιοχή που κόπηκε είναι ορατή:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Αποσφαλμάτωση περιοχής κόπιου
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Βελτιστοποίηση γραφικής μετά το clip() για το σχεδιασμό κίτρινου δίσκου
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Γλώσσα
context.clip();
Υποστήριξη προγράμματος περιήγησης
Ο αριθμός στην τаблицή σημαίνει την έκδοση του προγράμματος περιήγησης που υποστηρίζει πρώτη φορά την ιδιότητα.
| 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>.
