Παράμετρος globalCompositeOperation του Canvas

Οδηγός αναφοράς Canvas

Ορισμός και χρήση

globalCompositeOperation Ρύθμιση ή επιστροφή των παραμέτρων για τον τρόπο απόδοσης μιας πηγής (νέας) εικόνας σε μια στόχο (υπάρχουσα) εικόνα.

Η πηγή εικόνα = η ζωγραφική που θέλετε να τοποθετήσετε στον καμβά.

Η στόχος εικόνα = η ζωγραφική που ήδη έχετε τοποθετήσει στο καμβά.

Παράδειγμα

Παράδειγμα 1

Διαφορετικές τιμές globalCompositeOperation για την απόδοση ορθογώνιων. Το κόκκινο ορθογώνιο είναι η στόχος εικόνας. Το μπλε ορθογώνιο είναι η πηγή εικόνας:

　　　　　source-over 　　　　　　　　　　　destination-over

Το πρόγραμμα περιήγησής σας δεν υποστηρίζει το ετικέτα canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Όλες οι αξίες της ιδιότητας globalCompositeOperation:

Προσπαθήστε το προσωπικά

Γλώσσα

context.globalCompositeOperation="source-in";

Αξία ιδιότητας

Αξία Περιγραφή
source-over Προεπιλεγμένο. Εμφανίζετε την εικόνα πηγής πάνω από την εικόνα mårgos.
source-atop Εμφανίζετε την εικόνα πηγής στην κορυφή της εικόνας mårgos. Η περιοχή της εικόνας πηγής εκτός της εικόνας mårgos δεν είναι ορατή.
source-in Εμφανίζετε την εικόνα πηγής εντός της εικόνας mårgos. Μόνο η περιοχή της εικόνας πηγής εντός της εικόνας mårgos θα εμφανιστεί, η εικόνα mårgos είναι διαφανής.
source-out Εμφανίζετε την εικόνα πηγής εκτός της εικόνας mårgos. Μόνο η περιοχή της εικόνας πηγής εκτός της εικόνας mårgos θα εμφανιστεί, η εικόνα mårgos είναι διαφανής.
destination-over Εμφανίζετε την εικόνα mårgos πάνω από την εικόνα πηγής.
destination-atop Εμφανίζετε την εικόνα mårgos στην κορυφή της εικόνας πηγής. Η περιοχή της εικόνας mårgos εκτός της εικόνας πηγής δεν θα εμφανιστεί.
destination-in Εμφανίζετε την εικόνα mårgos εντός της εικόνας πηγής. Μόνο η περιοχή της εικόνας mårgos εντός της εικόνας πηγής θα εμφανιστεί, η εικόνα πηγής είναι διαφανής.
destination-out Εμφανίζετε την εικόνα mårgos εκτός της εικόνας πηγής. Μόνο η περιοχή της εικόνας mårgos εκτός της εικόνας πηγής θα εμφανιστεί, η εικόνα πηγής είναι διαφανής.
lighter Εμφανίζετε την εικόνα πηγής + την εικόνα mårgos.
copy Εμφανίζετε την εικόνα πηγής. Αφαιρείτε την εικόνα mårgos.
xor Χρήση της διαδικασίας xor για τη συνδυασμό της πηγαίας εικόνας με την måχαιροεικόνα.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: source-over

Υποστήριξη浏览器

Οι αριθμοί στη τаблицή σηματοδοτούν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Οι εκδόσεις Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.

Οδηγός αναφοράς Canvas