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
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);
Przykład 2
Wszystkie wartości atrybutu globalCompositeOperation:
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>.