Canvas globalCompositeOperation работает неправильно

Я поставил эту демонстрацию из MDN, https://developer.mozilla.org/ Samples/canvas-tutorial/6source-incanvas_composite.html в jsFiddle и сделал цвета прозрачными на 50%. http://jsfiddle.net/eGAvb/

Теперь, согласно Apple, source-in должен «отображать исходное изображение везде, где исходное изображение и целевое изображение непрозрачны. Отображать смешение везде, где источник и место назначения полупрозрачны. Отображать прозрачность везде, где либо источник, либо место назначения прозрачны».

Таким образом, вы можете увидеть проблему, когда посмотрите на то, как она отображается. Очень светло-розовый, совсем не фиолетовый. Пожалуйста, может кто-нибудь объяснить, почему здесь не смешано ни одного синего цвета с квадрата? Почему на самом деле стало светлее?

ДОПОЛНЕНИЕ: Я только что заметил, куда более поразительный очевидный пример. xor явно показывает фиолетовый цвет, когда, согласно официальной спецификации: «исключающее ИЛИ исходного изображения и целевого изображения», он ничего не должен показывать! Нигде не упоминается, что непрозрачность должна влиять на эти правила.


person Lars    schedule 09.08.2013    source источник


Ответы (1)


Он работает именно так, как должен в вашем примере. Взгляните на это, взятое непосредственно из спецификации

исходное изображение A — это форма или отображаемое изображение, а целевое изображение B — текущее состояние растрового изображения.

Отображать исходное изображение везде, где исходное изображение и целевое изображение непрозрачны. Показать прозрачность в другом месте.

В этом определении будет отображаться только исходное изображение. Поскольку он рисует целевое изображение, а затем вычитает исходное изображение, вы получаете более светлое общее изображение.

Другим примером может быть source-over, вы ожидаете, что прозрачность будет добавлена ​​друг к другу, а затем, используя destination-in и source-in, прозрачность должна быть уменьшена из-за вычитания формы.

Спасибо @simonsarris за то, что нашли эту жемчужину композиторские операторы Porter Duff

person Loktar    schedule 09.08.2013
comment
Но на самом деле он нарисован светлее, чем исходное изображение. Если вы посмотрите на пример с исходным кодом слева, он красный при альфа = 0,5. Источник, выделенный красным цветом, имеет значение альфа = 0,25, которое я нигде не устанавливал. Интересно, были ли умножены альфа-каналы, но я не могу найти нигде в сети описания такого поведения. - person Lars; 09.08.2013
comment
Я предполагаю, что это связано с вычитанием его прозрачности из прозрачности назначения. После быстрого теста это ровно половина прозрачности даже с глобальным набором альфы jsfiddle.net/loktar/eGAvb /7 - person Loktar; 09.08.2013
comment
Странно, да? Я не могу поверить, что нет никакой документации по этому поводу. Спасибо за ваши мысли, я действительно могу назначить награду за это, чтобы повысить осведомленность и посмотреть, что скажут другие. - person Lars; 09.08.2013
comment
эх, я все еще думаю, что он действует правильно, например, в случае засветки я ожидаю, что прозрачность повлияет на силу эффекта. Однако было бы полезно упомянуть о прозрачности, влияющей на надежность методов работы. - person Loktar; 09.08.2013
comment
Это верно. Должно существовать только исходное изображение и только там, где существовало место назначения. Поскольку место назначения существует наполовину (на полпути между ничем, то есть полностью прозрачным), исходное изображение копируется наполовину, в результате чего непрозрачный на 50% круг становится непрозрачным на 25% (или прозрачным на 75%) участком красного круга. - person Simon Sarris; 09.08.2013