Develop/canvas

32. globalCompositeOperation - 색상 블렌딩모드 (합성)

GuriZzang 2015. 8. 10. 15:35

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


globalCompositeOperation

캔버스에 그리려는 색이 그려져 있던 색과 겹쳐질때 어떤식으로 조합할지 지정합니다.
포토샵을 해보신 분들은 아시겠지만 레이어마다 블렌딩모드 라는 옵션이 있습니다.
그거와 비슷하다 보시면 될거 같습니다.

globalCompositeOperation = type

아래의 값 중에서 'source'라는 단어는 지금 캔버스에 그리려는 색을 말하며, 'desination'이라는 단어는 기존에 캔버스에 그려져 있던 색을 말합니다. 기본 동작은 'source-over" 입니다.


copy : 새 도형만 그리고 나머지는 모두 제거한다.

darker : 두 도형이 겹치는 부분에서는 두 색의 차이 값을 구하여 최종 색을 결정한다.

destination-atop : 기존에 있던 내용 중 오직 새 도형과 겹치는 부분만 보존된다. 새 도형은 기존 내용의 밑에 그려진다.

destination-in : 기존에 있던 내용 중 새 도형과 기존 캔버스 내용이 겹치는 부분만 보존된다. 나머지는 모두 투명하게 처리된다.

destination-out : 기존에 있던 내용 중 새 도형과 겹치지 않는 부분만 보존된다. 나머지는 모두 투명하게 처리된다.

destination-over : 새 도형은 기존 내용의 밑에 그려진다.

lighter : 두 도형이 겹치는 부분에서는 두 색 값의 합을 구하여 최종 색을 결정한다.

source-atop : 새로 그려질 도형 중 기존 내용과 겹치는 부분만 그려진다.

source-in : 새로 그려질 도형 중 새 도형과 기존 내용이 겹쳐지는 부분만 그려진다. 나머지는 모두 투명하게 처리된다.

source-out : 새로 그려질 도형 중 기존 내용과 겹치지 않는 부분만 그려진다.

source-over : 새 도형은 기존 내용 위에 그려진다. 기본값

xor : 겹쳐지는 부분의 도형은 모두 투명하게 그렇지 않은 부분은 정상적으로 그려진다.

source-over (초기 설정값)
초기 설정값이며, 기존 도형 위에 새 도형을 그립니다.

Image:Canvas_composite_srcovr.png

destination-over
새 도형은 기존 도형 뒤에 그려집니다.

Image:Canvas_composite_destovr.png

source-in
새 도형을 그릴 때 기존 도형과 겹치는 부분만 그려지고, 다른 모든 부분들은 투명해집니다.

Image:Canvas_composite_srcin.png

destination-in
기존 도형에서, 새 도형과 겹치는 부분만 남겨지고, 다른 모든 부분들은 투명해집니다.

Image:Canvas_composite_destin.png

source-out
기존 도형과 겹치지 않는 부분의 새 도형만 그려집니다.

Image:Canvas_composite_srcout.png

destination-out
기존 도형에서, 새 도형과 겹치는 부분은 사라지고, 겹치지 않는 부분만 남습니다.

Image:Canvas_composite_destout.png

source-atop
새 도형을그릴 때, 기존 도형과 겹치는 부분만 그립니다.

Image:Canvas_composite_srcatop.png

destination-atop
새 도형을 기존 도형의 뒤에 그리는데, 기존 도형은 새 도형과 겹치는 부분만 남고 다른 부분은 사라집니다.

Image:Canvas_composite_destatop.png

lighter
기존 도형과 새 도형이 겹치는 부분의 색이 바뀝니다. 바뀌는 색은 두 도형의 색상값을 더해서 결정됩니다.

Image:Canvas_composite_lighten.png

darker 

기존 도형과 새 도형이 겹치는 부분의 색이 바뀝니다. 바뀌는 색은 두 도형의 색상값을 빼서 결정됩니다.

캔버스 사양에서 제외되었고, 더 이상 지원되지 않습니다.

Image:Canvas_composite_darken.png

xor
기존 도형과 새 도형이 겹치는 부분이 투명해집니다.

Image:Canvas_composite_xor.png

copy
새 도형만 남고 다른 모든 부분은 제거됩니다.

Image:Canvas_composite_copy.png


'source-over','source-in','source-out','source-atop',

'destination-over','destination-in','destination-out','destination-atop',

'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',

'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',

'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'



간단히 아래의 소스를 보시면


Source 

1
ctx.globalCompositeOperation = "lighter";

.globalCompositeOperation = "lighter" 로 설정된 코드입니다.

색상끼리 CMYK조합이 아닌 RGB조합으로 계산됩니다.

※ CMYK는 감산혼합으로 C:파랑, M:빨강, Y:노랑, K:검정으로 C,M,Y 값이 더해지면 어두워져 검정색에 가까워 집니다.

위키 감산혼합

※ RGB는 가산혼합으로 R:빨강, G:녹색, B:파랑 세가지의 색이 겹쳐지면 밝아져 흰색에 가까워 집니다.

위키 가산혼합


Demo



아래의 코드는 여러가지의 블랜딩 모드를 나열한 것입니다.

소스는 너무 길어 생략 합니다.



Demo