Η ιδιότητα globalCompositeOperation του canvas HTML

Εγχειρίδιο αναφοράς HTML5 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 Προεπιλεγμένο. Το αρχικό εικόνα εμφανίζεται στην εικόνα στόχου.
source-atop Το αρχικό εικόνα εμφανίζεται στην κορυφή της εικόνας στόχου. Η ενότητα του αρχικού εικόνας εκτός της εικόνας στόχου είναι μη ορατή.
source-in Το αρχικό εικόνα εμφανίζεται μέσα στην εικόνα στόχου. Εμφανίζεται μόνο η ενότητα του αρχικού εικόνας μέσα στην εικόνα στόχου, η εικόνα στόχου είναι διαφανής.
source-out Το αρχικό εικόνα εμφανίζεται εκτός του στόχου εικόνας. Εμφανίζεται μόνο η ενότητα του αρχικού εικόνας εκτός του στόχου εικόνας, η εικόνα στόχου είναι διαφανής.
destination-over Εμφάνιση της εικόνας måål πάνω από την πηγαία εικόνα.
destination-atop Εμφάνιση της εικόνας måål πάνω από την πηγαία εικόνα. Η εικόνα måål εκτός της πηγαίας εικόνας δεν θα εμφανιστεί.
destination-in Εμφάνιση της εικόνας måål μέσα στην πηγαία εικόνα. Μόνο η εικόνα måål μέσα στην πηγαία εικόνα θα εμφανιστεί, η πηγαία εικόνα είναι διαφανής.
destination-out Εμφάνιση της εικόνας måål εκτός της πηγαίας εικόνας. Μόνο η εικόνα måål εκτός της πηγαίας εικόνας θα εμφανιστεί, η πηγαία εικόνα είναι διαφανής.
lighter Εμφάνιση της πηγαίας εικόνας + της εικόνας måål.
copy Εμφάνιση της πηγαίας εικόνας. Αγνοείται η εικόνα måål.
xor Χρησιμοποιώντας την αλγόριθμο XOR για τη συνδυασμό της πηγαίας εικόνας με την εικόνα måål.

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

Προεπιλεγμένη τιμή: 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>.

Εγχειρίδιο αναφοράς HTML5 Canvas