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

Question

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

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

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

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

Answer 1

Его работа точно так, как это должно быть в вашем примере. Посмотрите на это, которое было принято непосредственно из the spec

источник изображения, A, является форма или изображение визуализируемого, и изображение назначения, B, текущее состояние битовой карты.

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

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

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

Благодаря @simonsarris для нахождения этого драгоценного камня The Porter Duff Compositing Operators