2

MDN のこのデモhttps://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.htmlを jsFiddle に入れ、色を 50% 透明にしました。 http://jsfiddle.net/eGAvb/

現在、Apple によるとsource-in、「ソース イメージと宛先イメージの両方が不透明な場合はソース イメージを表示します。ソース イメージと宛先イメージが両方とも半透明の場合はブレンドを表示します。ソースまたは宛先のいずれかが透明な場合は透明度を表示します。」

そのため、表示方法を見ると問題があることがわかります。紫ではなくとても薄いピンクです。正方形の青がここに混ざっていない理由を誰か説明できますか? なぜ実際に軽くなったのですか？

追加: 私は実際に気づいたのですが、はるかに印象的な明白な例です。公式仕様によると、xor は明らかに紫色を示しています:「ソース画像と宛先画像の排他的論理和」では、何も表示されないはずです! 不透明度がこれらのルールに影響を与えるべきであるとはどこにも言及していません。

4

1 に答える 1

2

あなたの例では、まさにそれがどのように機能するかです。仕様から直接取得したこれを見てください

ソース イメージ A はレンダリングされる形状またはイメージであり、デスティネーション イメージ B はビットマップの現在の状態です。

ソース イメージと宛先イメージの両方が不透明な場合は、ソース イメージを表示します。他の場所で透明度を表示します。

その定義では、ソース イメージのみが表示されます。宛先画像を描画してからソース画像を差し引くため、全体的な画像が明るくなります。

別の例はsource-over、透明度が互いに追加されることを期待し、同様に使用するdestination-inとsource-in、形状の減算により透明度が低下するはずです。

この宝石を見つけてくれた @simonsarris に感謝しますThe Porter Duff Compositing Operators

于 2013-08-09T15:59:35.010 に答える