Kolor wynikowy przy składaniu kolorów
Pixel B jest elementem obrazka będącego na canvas, a jego kolory to:
Br, Bg, Bb, Ba.
Pixel A jest elementem obrazka dodawanego do canvas, a jego kolory to:
Ar, Ag, Ab, Aa.
Kolor wynikowy pixela po nałożeniu się piksela A na piksel B to:
Wr, Wg, Wb, Wa.
Wartości możemy obliczyć według wzorów:
Wa = 1 – (1 – Aa) * (1 – Ba)
Wr = (1 – Aa) * Br + Ar
Wg = (1 – Aa) * Bg + Ag
Wb = (1 – Aa) * Bb + Ab
Przy obliczeniu według wzoru należy wziąć pod uwagę, że wszystkie wartości kolorów są tzw. 'premultiplied alpha’, tzn. wartości koloru są już wstępnie pomnożone przez alpha, czyli zamiast r podajemy r*a, itd.
Br=0, Bg=0, Bb=255, Ba=0.8
Ar=255, Ag=0, Ab=0, Aa=0.8
Wa = 1 – (1 – 0.8) * (1 – 0.8)= 1 – 0.2 * 0.2= 1 – 0.04 = 0.96
Wr = (1 – 0.8) * 0*0.8 + 255*0.8 = 255 * 0.8 = 204
Wg = (1 – 0.8) * 0*0.8 + 0*0.8 = 0
Wb = (1 – 0.8) * 255*0.8 + 0*0.8 = 41
| rgba(0, 0, 255, 0.8) | rgba(255, 0, 0, 0.8) | rgba(204, 0, 41, 0.96) |