HTML5 기본 가이드

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 Canvas 변환 HTML5 Canvas 이미지 그리기

HTML5 Canvas 합성

HTML5캔버스에 도형을 그릴 때, 그려진 내용이 캔버스에 이미 그려진 내용과 어떻게 합성될지 설정할 수 있습니다. 이 문서는 그려진 내용이 캔버스에 이미 그려진 내용과 어떻게 혼합될지 설명합니다.

캔버스 합성

2D 컨텍스트는 두 가지 속성을 가지고 있으며, 이들은 캔버스의 합성 모드를 제어합니다. 이들은 다음과 같습니다:

globalAlpha
globalCompositeOperation

globalAlpha

globalAlpha 속성은 그려진 내용의 불투명도를 결정합니다/불투명도. 그것은 0에서1사이의 값입니다. 0은 그려진 내용이 완전히 투명하다는 것을 의미합니다. 값은 0.5그려진 내용이 반투명하다는 것을 의미합니다. 값은1그려진 내용이 완전히 불투명하다는 것을 의미합니다. 기본 값은1.
globalAlpha 속성은 다음과 같이 설정됩니다:

context.globalAlpha = 0.5;

globalCompositeOperation

globalCompositeOperation 속성은 그려진 내용이 캔버스에 이미 그려진 그래픽에 어떻게 혼합될지 결정합니다.
globalCompositeOperation 속성은 다음과 같이 설정됩니다:

context.globalCompositeOperation = "copy";

globalCompositeOperation은 "원"과 "목표"를 참조하여 원과 목표를 어떻게 혼합할지 지정합니다. 원은 그려진 내용을 의미하며, 목표는 이미 그려진 내용을 의미합니다. 다음은 가능한 값과 그 의미의 목록입니다:


값	설명
`copy`	원과 목표가 겹치는 곳에서 원이 표시됩니다.
`destination-atop`	원과 목표가 겹치고 두 가지 모두 불투명할 때, 목표가 표시됩니다.만약 목표가 투명하다면, 원이 표시됩니다.
`destination-in`	원과 목표가 겹치고 두 가지 모두 불투명할 때, 목표가 표시됩니다.겹치지 않는 곳에서 원은 표시되지 않습니다.
`destination-out`	원과 목표가 겹치지 않는 모든 곳에서 목표가 표시됩니다.다른 모든 곳에서 투명성을 표시합니다.
`destination-over`	원과 목표가 겹치는 곳에서 목표가 표시됩니다.겹치지 않으면 원이 표시됩니다.
`source-atop`	원과 목표가 겹치는 곳에서 원이 표시됩니다.겹치지 않는 곳이나 원이 투명할 때, 목표가 표시됩니다.
`source-in`	원과 목표가 겹치고 두 가지 모두 불투명할 때, 원이 표시됩니다.다른 모든 곳에서 투명성을 표시합니다.
`source-out`	원과 목표가 겹치지 않는 곳에서 원이 표시됩니다.다른 모든 곳에서 투명성을 표시합니다.
`source-over`	원이 불투명할 때, 원이 표시됩니다.목적지가 다른 어떤 곳보다 먼저 표시됩니다.
`lighter`	원색과 목적색이 서로 더해져서 색상이 더 밝아지고,1의 색상 값(그 색상의 최대 밝기)을 이동시킵니다.
`xor`

HTML5캔버스 구성 예제

이는 합성 모드와 alpha 값을 사용할 수 있는 예제 캔버스입니다. 버튼을 클릭하여 합성 모드를 변경할 수 있습니다. 캔버스 아래의 제어를 사용하여 Alpha 모드를 변경할 수 있습니다.

globalAlpha

globalAlpha 텍스트 필드를 볼 수 있다면, 0에서 1 사이의 값을 입력하십시오.100과 1 사이의 값을 사용하십시오. 코드는 값을 0에서 1 사이로 변환합니다.10과 1.0 사이의 값을 사용하십시오. 그렇지 않으면 슬라이더를 사용하십시오.
주의: 이 글을 작성할 때, Firefox와 Chrome는 이 합성 모드를 다르게 처리했습니다. 또한, rects와 text와도 다르게 보입니다. 이 모드가 어떻게 작동하는지 이해하기 위해, 지원할 계획인 여러 브라우저에서 다양한 모드를 테스트하세요.

HTML5 Canvas 변환 HTML5 Canvas 이미지 그리기