Przykład
Rysowanie prostokątów z użyciem dwóch różnych wartości globalCompositeOperation. Czerwone prostokąty sąobrazy przeznaczenia.Niebieskie prostokąty sąobrazy źródłowe:
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);
Spróbuj sam " Pomoc Browser
Internet Explorer 9, Firefox, Opera, Chrome i Safari obsługuje właściwości globalCompositeOperation.
Uwaga: Internet Explorer 8 i wcześniejsze wersje, nie obsługuje <canvas> elementu.
Definicja i Wykorzystanie
Zestawy własności globalCompositeOperation lub powraca jak źródło (nowy) obrazu są rysowane na miejscu przeznaczenia (istniejące) obraz.
class = "notranslate" źródło obrazu = rysunki na których chcesz umieścić na płótnie.
destination image = rysunki, które są już umieszczone na płótnie.
| Domyślna wartość: | source-over |
|---|---|
| Składnia JavaScript: | context.globalCompositeOperation="source-in"; |
wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| source-over | Zaniedbanie. Wyświetla obraz źródłowy na obrazie docelowym | Graj " |
| source-atop | Wyświetla obraz źródłowy na wierzchu obrazu docelowego. Częśćobrazu źródłowego,który jest pozadocelowym obrazunie jest wyświetlany | Graj " |
| source-in | Wyświetla obraz źródłowy w celu docelowego obrazu. Tylko częśćobrazu źródłowego,który jest wewnątrzobrazu docelowegojest widoczna, idocelowy obrazjest przejrzysty | Graj " |
| source-out | Wyświetla obraz źródłowy z obrazu docelowego. Tylko częśćobrazu źródłowego,który jest pozadocelowym obraziejest widoczna, idocelowy obrazjest przejrzysty | Graj " |
| destination-over | Wyświetla obraz docelowy nad obrazem źródłowym | Graj " |
| destination-atop | Wyświetla obraz docelowy na górnej części obrazu źródłowego. Częśćdocelowego obrazu,który znajduje się pozaobrazem źródłowymnie jest wyświetlany | Graj " |
| destination-in | Wyświetlanie obrazu docelowego w celu obrazie źródłowym. Tylko częśćobrazu docelowego,który jest w środkuobrazu źródłowegojest widoczny, aobraz źródłowyjest przejrzysty | Graj " |
| destination-out | Wyświetla docelowy obraz z obrazu źródłowego. Tylko częśćobrazu docelowego,który znajduje się pozaobrazem źródłowymjest widoczny, aobraz źródłowyjest 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 | Źródłem obrazu jest połączona za pomocą wyłącznego lub z obrazu docelowego | Graj " |
Przykład
Wszystkie wartości nieruchomości globalCompositeOperation:
source-over:
source-szczycie:
Źródło w:
source-out:
destination-over:
destination-szczycie:
przeznaczenia w:
destination-out:
zapalniczka:
Kopiuj:
xor: