Zielony Smok

HTML5 canvas – tutorial

Składanie kolorów w przeglądarkach

Jak już wiemy kolor RGBA może być opisany przez cztery liczby, które oznaczają odpowiednio:

  • R – kolor czerwony, 0-255
  • G – kolor zielony, 0-255
  • B – kolor niebieski, 0-255
  • A – przezroczystość, 0-255, oznaczaną jako α = 0.0 – 1.0, gdzie 0.0 oznacza zupełną przezroczystość, 1.0 zupełną nieprzezroczystość, a liczby pośrednie – kolory z pewną przezroczystością, gdzie α= A/255. Jeżeli A =200, to α = 200/255≈0.784

Mamy 2 zbiory:

Kompozycja kolorów

  • D(destination), rgba(255,0, 0,0.5)
  • S (source), rgba(0,0,255,0.6)

Jeżeli przezroczystość S wynosi Kompozycja kolorów to tło ma przezroczystość Kompozycja kolorów. Przenikająca część tła to Kompozycja kolorów, a blokowana część tła to Kompozycja kolorów.

Jeżeli przygotujemy tabelkę dla wszystkich możliwości to otrzymamy:

  S Kompozycja kolorów D
tło Kompozycja kolorów Kompozycja kolorów Kompozycja kolorów
tło blokowane Kompozycja kolorów Kompozycja kolorów Kompozycja kolorów
tło przechodzące Kompozycja kolorów Kompozycja kolorów Kompozycja kolorów

Rozważamy tutaj cztery możliwości w sensie teorii zbiorów:

opis Kompozycja kolorów przezroczystość Bierzemy pod uwagę Oznaczenie
obszar poza S i obszar poza D, czyli tło T , nie zajęte ani przez S ani przez D Kompozycja kolorów Kompozycja kolorów 0(Tło) 0
obszar S i obszar poza D, czyli obszar S nie nakładający się z D Kompozycja kolorów Kompozycja kolorów 0, S S
obszar poza S i obszar D, czyli obszar D nie nakładający się z S Kompozycja kolorów Kompozycja kolorów 0, D D
obszar S i obszar D, czyli obszar nakładania się S i D Kompozycja kolorów Kompozycja kolorów 0, S, D SD

Jeżeli przemnożymy liczby elementów w kolumnie ‘Bierzemy pod uwagę’ to otrzymamy: 1 x 2 x 2 x 3 = 12 możliwości, które ujmujemy w tabelce:

Zasada Portera-Duffa FS FD
clear (w JavaScript nie występuje) 0 0
copy 0 1
destination-atop Kompozycja kolorów Kompozycja kolorów
destination-in 0 Kompozycja kolorów
destination-out 0 Kompozycja kolorów
destination-over Kompozycja kolorów 1
lighter 1 0
source-atop Kompozycja kolorów Kompozycja kolorów
source-in Kompozycja kolorów 0
source-out Kompozycja kolorów 0
source-over 1 Kompozycja kolorów
xor Kompozycja kolorów Kompozycja kolorów

F- oznacza frakcję, w jakim kolor S lub D występuje w miejscu złożenia kolorów.

Przezroczystość wynikowa Kompozycja kolorów będzie wynosiła:

Kompozycja kolorów

Kolor wynikowy Kompozycja kolorów będzie wynosił:

Kompozycja kolorów

gdzie Kompozycja kolorów jest składnikiem koloru przemnożonym wstępnie przez Kompozycja kolorów (jeżeli np kolor czerwony = 255, a przezroczystość koloru wynosi Kompozycja kolorów to za Kompozycja kolorów podstawiamy 255*0.5 i podobnie dla Kompozycja kolorów, gdzie podajemy kolor przemnożony wstępnie przez Kompozycja kolorów

Obliczenia

  • D(destination), rgba(255,0, 0,0.5)
  • S (source), rgba(0,0,255,0.6)

zastosowana była zasada source-over, a zatem

Kompozycja kolorów

Kompozycja kolorów

Z tabeli:

Kompozycja kolorów

Kompozycja kolorów

Kompozycja kolorów Kompozycja kolorów

Kompozycja kolorów

Kompozycja kolorów

Kompozycja kolorów

Kolor wynikowy to rgba (51, 0, 153, 0.8).

Kolor wynikowy

Do obliczenia koloru można użyć funkcji kolor przedstawionej w skrypcie rachzb.js.

A oto przykład użycia funkcji:

Listing

...
var col1 = "rgba(255,0,0,0.5)";//destination
var col2 = "rgba(0,0,255,0.6)"; //source
ctx.fillStyle = kolor(col1, col2, "source-over");
ctx.fillRect(270, 75, 50, 50);
ctx.fillText(ctx.fillStyle, 200, 170);

A oto wynik

Kompozycja kolorów

Reguły

copy

Reguła copy

Reguła copy

Reguła copy

Obszar 0 S D SD
Wyświetlany 0 0 D D

Reguła copy

Reguła copy

destination-atop

Reguła destination-atop

Reguła destination-atop

Reguła destination-atop

Obszar 0 S D SD
Wyświetlany 0 S 0 D

Reguła destination-atop

Reguła destination-atop

destination-in

Reguła destination-in

Reguła destination-in

Reguła destination-in

Obszar 0 S D SD
Wyświetlany 0 0 0 D

Reguła destination-in

Reguła destination-in

destination-out

Reguła destination-out

Reguła destination-out

Reguła destination-out

Obszar 0 S D SD
Wyświetlany 0 0 D 0

Reguła destination-out

Reguła destination-out

destination-over

Reguła destination-over

Reguła destination-over

Reguła destination-over

Obszar 0 S D SD
Wyświetlany 0 S D D

Reguła destination-over

Reguła destination-over

lighter

Reguła lighter

Reguła lighter

Reguła lighter

Obszar 0 S D SD
Wyświetlany 0 S 0 S

Reguła lighter

Reguła lighter

source-atop

Reguła source-atop

Reguła source-atop

Reguła source-atop

Obszar 0 S D SD
Wyświetlany 0 0 D S

Reguła source-atop

Reguła source-atop

source-in

Reguła source-in

Reguła source-in

Reguła source-in

Obszar 0 S D SD
Wyświetlany 0 0 0 S

Reguła source-in

Reguła source-in

source-out

Reguła source-out

Reguła source-out

Reguła source-out

Obszar 0 S D SD
Wyświetlany 0 S 0 0

Reguła source-out

Reguła source-out

source-over

Reguła source-over

Reguła source-over

Reguła source-over

Obszar 0 S D SD
Wyświetlany 0 S D S

Reguła source-over

Reguła source-over

xor

Reguła xor

Reguła xor

Reguła xor

Obszar 0 S D SD
Wyświetlany 0 S D 0

Reguła xor

Reguła xor