globalCompositeOperation::JavaScript 레퍼런스

Hidden(MetaData)

account_tree
bug_report

DOMStringglobalCompositeOperation

새로운 형태를 캔버스에 그릴 때 적용할 합성 방식을 설정한다.

속성 명세

명세
분류	값	설명
default	source-over
writable	yes

사용 가능한 값
분류	값	설명
optional	source-in	새 형태는 캔버스 내 기존 형태의 겹치는 위치에서 그려진다. 다른 모든 것은 투명하게 처리된다.
optional	source-out	새 형태는 캔버스 내 기존 형태의 겹치지 않는 위치에서 그려진다.
optional	source-atop	새 형태는 캔버스 내 기존 형태와 겹치는 위치에서 그려진다.
optional	destination-over	새 형태는 캔버스 내 기존 형태 뒤에 그려진다.
optional	destination-in	캔버스 내 기존 형태는 새 형태와 겹치는 위치에 나타난다. 다른 모든 것은 투명하게 처리한다.
optional	destination-out	캔버스 내 기존 형태는 새 형태와 겹치지 않는 위치에 나타난다.
optional	destination-atop	캔버스 내 기존 형태는 새 형태와 겹치는 위치에 나타난다. 새 형태는 캔버스 내 기존 형태 뒤에 그려진다.
optional	lighter	두 형태가 겹치는 위치의 색상은 색상 값을 추가하여 결정한다.
optional	copy	새 형태만 그려진다.
optional	xor	새 형태는 캔버스 내 기존 형태와 겹치는 위치에서 투명하게 처리된다.
optional	multiply	새 형태는 캔버스 내 기존 형태의 픽셀이 가지고 있는 색상과 곱해지면서 어두워진다.
optional	screen	새 형태는 캔버스 내 기존 형태의 픽셀이 가지고 있는 색상이 반전되어 곱해지고 다시 반전되어 밝아진다.(multiply와 반대)
optional	overlay	기존 형태와 새 형태의 픽셀이 혼합되면서 기존 형태의 어두운 부분은 더 어두워지고 밝은 부분은 더 밝아진다.
optional	darken	기존 형태와 새 형태의 픽셀이 혼합되면서 가장 어두운 픽셀을 유지한다.
optional	lighten	기존 형태와 새 형태의 픽셀이 혼합되면서 가장 밝은 픽셀을 유지한다.
optional	color-dodge	기존 형태를 반전된 새 형태로 나눈다.
optional	color-burn	반전된 기존 형태를 새 형태로 나눈 다음 결과를 반전한다.
optional	hard-light	overlay처럼 보이지만 기존 형태와 새 형태의 픽셀이 바뀌어 나타난다.
optional	soft-light	hard-light보다 부드러운 결과를 만든다.
optional	difference
optional	exclusion	difference와 비슷하지만 대비를 낮게 처리한다.
optional	hue	새 형태의 색조를 갖되 기존 형태의 명도와 채도를 유지한다.
optional	saturation	새 형태의 채도를 갖되 기존 형태의 명도와 색조를 유지한다.
optional	color	새 형태의 색조와 채도를 갖되 기존 형태의 명도를 유지한다.
optional	luminosity	새 형태의 명도를 갖되 기존 형태의 색조와 채도를 유지한다.

JavaScript
HTML
CSS
Development

WEBAPI

WEBAPI

DOMStringglobalCompositeOperation

속성 명세

지원 웹브라우저

JavaScriptHTMLCSSDevelopment

WEBAPI

WEBAPI

DOMStringglobalCompositeOperation

속성 명세

지원 웹브라우저

JavaScript
HTML
CSS
Development