Atrybut globalCompositeOperation płótna Canvas

Podręcznik Canvas

Definicja i użycie

globalCompositeOperation Ustawienia lub zwracanie sposobu, w jaki rysuje się obraz źródłowy (nowy) na obraz docelowy (istniejący).

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

Obraz docelowy = Rysunek umieszczony na płótnie.

Przykład

Przykład 1

Rysowanie prostokątów z różnymi wartościami 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 znacznika 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
Domyślna wartość: Domyślnie. Wyświetl obraz źródłowy na obrazie docelowym.
source-atop Wyświetl obraz źródłowy na górze obrazu docelowego. Część obrazu źródłowego poza obrazem docelowym jest niewidoczna.
source-in Wyświetl obraz źródłowy w obrazie docelowym. Tylko część obrazu źródłowego w obrazie docelowym będzie wyświetlona, obraz docelowy jest przezroczysty.
source-out Wyświetl obraz źródłowy poza obrazem docelowym. Tylko część obrazu źródłowego poza obrazem docelowym będzie wyświetlona, obraz docelowy jest przezroczysty.
destination-over Wyświetl obraz docelowy nad obrazem źródłowym.
destination-atop Wyświetl obraz docelowy na górze obrazu źródłowego. Część obrazu docelowego poza obrazem źródłowym nie będzie wyświetlona.
destination-in Wyświetl obraz docelowy w obrazie źródłowym. Tylko część obrazu docelowego w obrazie źródłowym będzie wyświetlona, obraz źródłowy jest przezroczysty.
destination-out Wyświetl obraz docelowy poza obrazem źródłowym. Tylko część obrazu docelowego poza obrazem źródłowym będzie wyświetlona, obraz źródłowy jest przezroczysty.
jasniejszy Wyświetl obraz źródłowy + obraz docelowy.
kopiuj Wyświetl obraz źródłowy. Ignoruj obraz docelowy.
xor

Kombinowanie obrazu źródłowego z obrazem docelowym za pomocą operacji XOR.

Szczegóły techniczne Domyślna wartość:

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:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas