HTML 캔버스 globalCompositeOperation 속성
정의와 사용법
globalCompositeOperation 속성 설정이나 반환은 새로운(원본) 이미지를 기존(목표) 이미지에 어떻게 그릴지 정의합니다.
원본 이미지 = 캔버스에 배치할 계획인 그리기입니다.
목표 이미지 = 이미 캔버스에 배치한 그리기입니다.
인스턴스
예제 1
다른 globalCompositeOperation 값으로 다각형을 그립니다. 빨간 다각형은 목표 이미지입니다. 파란 다각형은 원본 이미지입니다:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
예제 2
모든 globalCompositeOperation 속성 값:
문법
context.globalCompositeOperation="source-in";
속성 값
| 값 | 설명 |
|---|---|
| source-over | 기본 설정. 목표 이미지 위에 원본 이미지를 표시합니다. |
| source-atop | 목표 이미지 위에 원본 이미지를 표시합니다. 원본 이미지의 목표 이미지 외에 있는 부분은 보이지 않습니다. |
| source-in | 목표 이미지 내에 원본 이미지를 표시합니다. 원본 이미지의 일부만 표시되고, 목표 이미지는 투명합니다. |
| source-out | 목표 이미지 외에 원본 이미지를 표시합니다. 원본 이미지의 일부만 표시되고, 목표 이미지는 투명합니다. |
| destination-over | 원본 이미지 위에 목표 이미지를 표시합니다. |
| destination-atop | 원본 이미지 위에 목표 이미지를 표시합니다. 원본 이미지 외의 목표 이미지 부분은 표시되지 않습니다. |
| destination-in | 원본 이미지 내에 목표 이미지를 표시합니다. 원본 이미지 내의 목표 이미지 부분만 표시되며, 원본 이미지는 투명합니다. |
| destination-out | 원본 이미지 외에 목표 이미지를 표시합니다. 원본 이미지 외의 목표 이미지 부분만 표시되며, 원본 이미지는 투명합니다. |
| lighter | 원본 이미지 + 목표 이미지를 표시합니다. |
| copy | 원본 이미지를 표시합니다. 목표 이미지는 무시합니다. |
| xor | 원본 이미지와 목표 이미지를 혼합하기 위해 이xor 연산을 사용합니다. |
기술 세부 사항
| 기본값: | source-over |
|---|
브라우저 지원
표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
