RGBA Pixel Addition Alpha-Wert in Canvas

Ich arbeite mit einem HTMLcanvas Element, versuchen, Formen mit Opazität in es zu zeichnen und sie dann auf der Grundlage ihrer Opazität zu kolorieren. Zum Beispiel könnte ich ein Quadrat mit rgba(0,0,0,.5) und ein anderes mit rgba(100, 100, 100, .5) überlappen. Meine Frage ist: Welchen Effekt hat Überschneidungen auf den alpha Wert? Offensichtlich würde ein a:.5 auf einem a:.5a:1 nicht produzieren ... gibt es eine Formel dafür? Wie funktioniert es?RGBA Pixel Addition Alpha-Wert in Canvas

Quelle

2017-07-21 WookieCoder

Sind sie nicht einfach (inverser) multipliziert, so '0,5 × 0,5 = .25' und kombinierte Opazität wird' 1-. 25 = .75'? – myfunkyside

https://drafts.fxtf.org/compositing-1/#canvascompositingandblending – K3N

Das macht total Sinn, warum es mir nicht eingefallen ist ... Ich weiß es nicht – WookieCoder

Alle Formeln, wie Alpha-Blending und Zusammensetzung Werke befinden sich in den Spezifikationen finden:

https://drafts.fxtf.org/compositing-1/#canvascompositingandblending

Alpha-Kanäle multipliziert werden (die Alpha-Blending-Formel in der Verbindung sehen), so dass sie nicht hinzufügen bis zu 1.

Ie (Quelle: ebenda):

co = Cs x αs + Cb x αb x (1 - αs)

co: the premultiplied pixel value after compositing 
Cs: the color value of the source graphic element being composited 
αs: the alpha value of the source graphic element being composited 
Cb: the color value of the backdrop 
αb: the alpha value of the backdrop

Quelle

2017-07-21 18:18:48 K3N

RGBA Pixel Addition Alpha-Wert in Canvas

Antwort

Verwandte Themen