Przykład
Rysowanie prostokątów przy użyciu dwóch różnych wartości globalCompositeOperation. Czerwone prostokąty są destination images . Niebieskie prostokąty są source images :
źródło-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);
Spróbuj sam " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
Zestawy własności globalCompositeOperation lub powraca jak źródło (new) obrazu są rysowane na miejsca przeznaczenia (existing) obraz.
źródło obrazu = rysunki masz zamiar umieścić na płótnie.
obrazu docelowego = rysunki, które są już umieszczone na płótnie.
| Domyślna wartość: | źródło-over |
|---|---|
| Składnia JavaScript: | context .globalCompositeOperation="source-in"; |
wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| source-over | Zaniedbanie. Wyświetla obraz źródłowy nad obrazu docelowego | Graj " |
| source-atop | Wyświetla obraz źródłowy w górnej części obrazu docelowego. Część source image , który jest poza destination image nie jest wyświetlany | Graj " |
| source-in | Wyświetla obraz źródłowy do docelowego obrazu. Tylko część source image , który jest wewnątrz destination image jest pokazane, a destination image jest przejrzysty | Graj " |
| source-out | Wyświetla obraz źródłowy z obrazu docelowego. Tylko część source image , który jest poza destination image jest widoczna, a destination image jest przejrzysty | Graj " |
| destination-over | Wyświetla docelowy obraz nad obrazem źródłowym | Graj " |
| destination-atop | Wyświetla obraz docelowy na górnej części obrazu źródłowego. Część destination image , który jest poza source image nie jest wyświetlana | Graj " |
| destination-in | Wyświetla docelowy obraz do obrazu źródłowego. Tylko część destination image , który znajduje się wewnątrz source image jest widoczny, a source image jest przejrzysty | Graj " |
| destination-out | Wyświetla docelowy obraz z obrazu źródłowego. Tylko część destination image , który jest poza source image jest widoczny, a source image jest przejrzysty | Graj " |
| lighter | Wyświetla obraz źródłowy + docelowy wizerunek | Graj " |
| copy | Wyświetla obraz źródłowy. Docelowy obraz jest ignorowany | Graj " |
| xor | Obraz źródłowy jest połączona za pomocą wyłączne OR z obrazu docelowego | Graj " |
<Płótno Przedmiot