Atrybut globalCompositeOperation canvas HTML

Definicja i użycie

globalCompositeOperation Ustawienia atrybutu lub zwracanie, jak rysować obraz źródłowy (nowy) na obrazie docelowym (istniejącym).

Obraz źródłowy = Rysunek, który chcesz umieścić na płótnie.

Obraz docelowy = Rysunek, który umieściłeś na płótnie.

Przykład

Przykład 1

Rysuj prostokąty za pomocą różnych wartości globalCompositeOperation. Czerwony prostokąt to obraz docelowy. Niebieski prostokąt to obraz źródłowy:

     source-over             destination-over

Twoja przeglądarka nie obsługuje tagu 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);

Spróbuj sam!

Przykład 2

Wszystkie wartości atrybutu globalCompositeOperation:

Spróbuj sam!

Gramatyka

context.globalCompositeOperation="source-in";

Wartość atrybutu

Wartość Opis
source-over Domyślnie. Pokazuj obraz źródłowy na obrazie docelowym.
source-atop Pokazuj obraz źródłowy na górze obrazu docelowego. Część obrazu źródłowego poza obrazem docelowym będzie niewidoczna.
source-in Pokazuj obraz źródłowy w obrazie docelowym. Pokazywana będzie tylko część obrazu źródłowego w obrazie docelowym, a obraz docelowy jest przezroczysty.
source-out Pokazuj obraz źródłowy poza obrazem docelowym. Pokazywana będzie tylko część obrazu źródłowego poza obrazem docelowym, a obraz docelowy jest przezroczysty.
destination-over Pokazuj obraz docelowy nad obrazem źródłowym.
destination-atop Pokazuj obraz docelowy na wierzchu obrazu źródłowego. Część obrazu docelowego poza obrazem źródłowym nie będzie widoczna.
destination-in Pokazuj obraz docelowy w obrazie źródłowym. Tylko część obrazu docelowego w obrazie źródłowym będzie widoczna, a obraz źródłowy będzie przezroczysty.
destination-out Pokazuj obraz docelowy poza obrazem źródłowym. Tylko część obrazu docelowego poza obrazem źródłowym będzie widoczna, a obraz źródłowy będzie przezroczysty.
lighter Pokazuj obraz źródłowy + obraz docelowy.
copy Pokazuj obraz źródłowy. Ignoruj obraz docelowy.
xor Kombinuj obraz źródłowy z obrazem docelowym za pomocą operacji XOR.

Szczegóły techniczne

Domyślna wartość: source-over

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

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

Komentarz:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.