Canvas globalCompositeOperation이 올바르게 작동하지 않습니다.

Question

MDN에서이 데모를 jsFiddle에 넣고 색상을 50 % 투명하게했습니다. http://jsfiddle.net/eGAvb/

이제, 애플에 따르면, source-in은 "소스 이미지와 대상 이미지가 모두 불투명 곳 소스 이미지를 표시 할 예정이다. 소스 및 대상은 모두 반투명 어디에서나 조화를 표시합니다. 소스 투명성 곳 중 하나를 표시 또는 대상이 투명합니다. "

표시 방법을 볼 때 문제가 발생할 수 있습니다. 매우 밝은 분홍색이나 전혀 보라색이 아닙니다. 광장의 파란색이 왜 여기에 혼합되어 있지 않은지 설명해 주실 수 있습니까? 왜 실제로 더 가벼워 졌습니까?

추가 : 저는 실제로 실제로 눈치 챘습니다. 명백한 예가 훨씬 두드러졌습니다. xor는 공식 명세에 따르면 "원본 이미지와 대상 이미지의 배타적 OR"이라고 표시 될 때 명확하게 보라색을 나타냅니다. 아무 것도 보여줘야합니다! 불투명도가 이러한 규칙에 영향을 미쳐야한다는 언급은 없습니다.

Answer 1

귀하의 예에서 정확하게 작동해야합니다. the spec

원본 이미지, 문의 찍은 이것 봐, 형상 또는 이미지가 렌더링되고, 상기 대상 이미지, B는 맵의 현재 상태이다.

원본 이미지와 대상 이미지가 모두 불투명 한 위치에 원본 이미지를 표시합니다. 투명성을 다른 곳에 표시하십시오.

해당 정의 의 경우 원본 이미지가 표시됩니다. 대상 이미지를 그린 다음 원본 이미지를 뺄 때 전체 이미지가 가벼워집니다.

또 다른 예는 source-over 일 것입니다. 투명도가 서로 더해지기를 기대하고, 마찬가지로 destination-in과 source-in을 사용하면 투명도는 모양을 차감하여 감소해야합니다.

덕분에이 보석 The Porter Duff Compositing Operators