html5-canvas
Komponowanie

Rysuj za istniejącymi kształtami za pomocą „miejsca docelowego”

context.globalCompositeOperation = "destination-over"

Kompozycja „docelowa” umieszcza nowy rysunek pod istniejącymi rysunkami .

context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over';  // sunny UNDER rainy
context.drawImage(sunny,0,0);

Usuń istniejące kształty za pomocą „miejsca docelowego”

context.globalCompositeOperation = "destination-out"

Kompozycja „docelowa” wykorzystuje nowe kształty do usuwania istniejących rysunków.

Nowy kształt nie jest narysowany - jest po prostu używany jako „foremka do ciastek” do usuwania istniejących pikseli.

context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out';   // bitemark erases
context.drawImage(bitemark,100,40);

Domyślne komponowanie: Nowe kształty są rysowane nad Istniejącymi kształtami

context.globalCompositeOperation = "source-over"

Kompozycja „source-over” [domyślnie] , umieszcza wszystkie nowe rysunki na istniejących rysunkach.

context.globalCompositeOperation='source-over';  // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);

Przycinaj obrazy wewnątrz kształtów za pomocą „miejsca docelowego”

context.globalCompositeOperation = "destination-in"

Kompozycja „docelowa” przycina istniejące rysunki do nowego kształtu.

Uwaga: Każda część istniejącego rysunku, która nie mieści się w nowym rysunku, jest usuwana.

context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in';  // picture clipped inside oval
context.drawImage(oval,0,0);

Przycinaj obrazy wewnątrz kształtów za pomocą „źródła”

context.globalCompositeOperation = "source-in";

kompozycja source-in klipuje nowe rysunki w istniejącym kształcie.

Uwaga: Każda część nowego rysunku, która wykracza poza istniejący rysunek, jest usuwana.

context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in';  // picture clipped inside oval
context.drawImage(picture,0,0);

Cienie wewnętrzne z „source-atop”

context.globalCompositeOperation = 'source-atop'

Kompozycja source-atop nowy obraz do istniejącego kształtu.

// gold filled rect
ctx.fillStyle='gold';
ctx.fillRect(100,100,100,75);
// shadow
ctx.shadowColor='black';
ctx.shadowBlur=10;
// restrict new draw to cover existing pixels
ctx.globalCompositeOperation='source-atop';
// shadowed stroke
// "source-atop" clips off the undesired outer shadow
ctx.strokeRect(100,100,100,75);
ctx.strokeRect(100,100,100,75);

Odwróć lub zaneguj obraz z „różnicą”

Renderuj biały prostokąt na obrazie za pomocą operacji złożonej

ctx.globalCompositeOperation = 'difference';

Wielkość efektu można kontrolować za pomocą ustawienia alfa

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='difference';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Czarno-biały z „kolorem”

Usuń kolor z obrazu za pomocą

ctx.globalCompositeOperation = 'color';

Wielkość efektu można kontrolować za pomocą ustawienia alfa

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Zwiększ kontrast kolorów dzięki „nasyceniu”

Zwiększ poziom nasycenia obrazu za pomocą

ctx.globalCompositeOperation = 'saturation';

Wielkość efektu można kontrolować za pomocą ustawienia alfa lub nasycenia w nakładce wypełnienia

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Sepia FX z „jaskrawością”

Stwórz kolorowy sepia FX za pomocą

ctx.globalCompositeOperation = 'luminosity';

W takim przypadku kolor sepii jest renderowany jako pierwszy obraz.

Wielkość efektu można kontrolować za pomocą ustawienia alfa lub nasycenia w nakładce wypełnienia

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle = "#F80";  // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);

// set the composite operation
ctx.globalCompositeOperation ='luminosity';

ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);

Zmień krycie za pomocą „globalAlpha”

context.globalAlpha=0.50

Możesz zmienić krycie nowych rysunków, ustawiając wartość globalAlpha na wartość od 0,00 (w pełni przezroczysta) do 1,00 (w pełni nieprzezroczysta).

Domyślna wartość globalAlpha to 1,00 (całkowicie nieprzezroczysta).

Na istniejące rysunki nie ma wpływu globalAlpha .

// draw an opaque rectangle
context.fillRect(10,10,50,50);

// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;

// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);