[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.globalCompositeOperation

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

// html
<canvas id="canvas" width="400" height="300"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając 
// z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Kształty stają się przezroczyste tam, gdzie nakładają się na siebie,
// a wszędzie indziej są rysowane normalnie.

ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "#6C0";
ctx.fillRect(150, 75, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(75, 150, 75, 75);
ctx.fillStyle = "#F30";

const ctx = canvas4.getContext("2d");
ctx.save();
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "#09F";
ctx.fillRect(120, 120, 160, 160);

Opis:
Właściwość CanvasRenderingContext2D.globalCompositeOperation ustawia typ operacji komponowania, który ma być zastosowany podczas rysowania nowych kształtów. Wartość ciąg określający, której operacji trybu komponowania lub mieszania należy użyć. Może to być dowolna z następujących wartości:

"source-over" - Jest to ustawienie domyślne, które rysuje nowe kształty na istniejącej zawartości obszaru roboczego.
"source-in" - Nowy kształt jest rysowany tylko tam, gdzie zarówno nowy kształt, jak i docelowe płótno nakładają się na siebie. Wszystko inne staje się przejrzyste.
"source-out" - Nowy kształt zostanie narysowany w miejscu, w którym nie nakłada się na istniejącą zawartość obszaru roboczego.
"source-atop" - Nowy kształt jest rysowany tylko tam, gdzie nakłada się na istniejącą zawartość płótna.
"destination-over" - Nowe kształty są rysowane za istniejącą zawartością płótna.
"destination-in" - Istniejąca zawartość obszaru roboczego zostaje zachowana w miejscach, gdzie nakładają się zarówno nowy kształt, jak i istniejąca zawartość obszaru roboczego. Wszystko inne staje się przejrzyste.
"destination-out" - Istniejąca treść zostaje zachowana w miejscu, w którym nie nakłada się na nowy kształt.
"destination-atop" - Istniejące płótno zostanie zachowane tylko tam, gdzie zachodzi na nowy kształt. Nowy kształt zostanie narysowany za zawartością płótna.
"lighter" - W przypadku nakładania się obu kształtów kolor jest określany przez dodanie wartości kolorów.
"copy" - Pokazano tylko nowy kształt.
"xor" - Kształty stają się przezroczyste tam, gdzie nakładają się na siebie, a wszędzie indziej są rysowane normalnie.
"multiply" - Piksele górnej warstwy są mnożone przez odpowiadające im piksele dolnej warstwy. Rezultatem jest ciemniejszy obraz.
"screen" - Piksele są odwracane, mnożone i ponownie odwracane. Rezultatem jest jaśniejszy obraz w odróżnieniu od multiply
"overlay" - Kombinacja multiplyi screen. Ciemne części warstwy podstawowej stają się ciemniejsze, a jasne stają się jaśniejsze.
"darken" - Zachowuje najciemniejsze piksele obu warstw.
"lighten" - Zachowuje najjaśniejsze piksele obu warstw.
"color-dodge" - Dzieli dolną warstwę przez odwróconą górną warstwę.
"color-burn" - Dzieli odwróconą dolną warstwę przez górną warstwę, a następnie odwraca wynik.
"hard-light" - Podobnie overlay jak kombinacja multiplyi screen ale zamiast tego z zamienioną górną i dolną warstwą.
"soft-light" - Łagodniejsza wersja hard-light. Czysta czerń lub biel nie skutkuje czystą czernią lub bielą.
"difference" - Odejmuje dolną warstwę od górnej warstwy, lub odwrotnie, aby zawsze uzyskać wartość dodatnią.
"exclusion" - Podobnie difference, ale z mniejszym kontrastem.
"hue" - Zachowuje jasność i nasycenie dolnej warstwy, przyjmując odcień górnej warstwy.
"saturation" - Zachowuje jasność i odcień dolnej warstwy, przyjmując chromę górnej warstwy.
"color" - Zachowuje jasność dolnej warstwy, przyjmując odcień i nasycenie górnej warstwy.
"luminosity" - Zachowuje odcień i nasycenie dolnej warstwy, przyjmując jasność górnej warstwy.

Zobacz też: