Canvas 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-atop | 목표 이미지 위에 원본 이미지를 표시합니다. 원본 이미지가 목표 이미지 외에 위치한 부분은 보이지 않습니다。 |
| source-in | 목표 이미지 내에 원본 이미지를 표시합니다. 목표 이미지 내의 원본 이미지 부분만 표시되며, 목표 이미지는 투명합니다。 |
| source-out | 목표 이미지 외에 원본 이미지를 표시합니다. 목표 이미지 외의 원본 이미지 부분만 표시되며, 목표 이미지는 투명합니다。 |
| destination-over | 원본 이미지 상단에 목표 이미지를 표시합니다。 |
| destination-atop | 원본 이미지 위에 목표 이미지를 표시합니다. 원본 이미지 외의 목표 이미지 부분은 표시되지 않습니다。 |
| destination-in | 원본 이미지 내에 목표 이미지를 표시합니다. 원본 이미지 내의 목표 이미지 부분만 표시되며, 원본 이미지는 투명합니다。 |
| destination-out | 원본 이미지 외에 목표 이미지를 표시합니다. 원본 이미지 외의 목표 이미지 부분만 표시되며, 원본 이미지는 투명합니다。 |
| lighter | 원본 이미지 + 목표 이미지를 표시합니다。 |
| 복사 | 원본 이미지를 표시합니다. 목표 이미지를 무시합니다。 |
| xor |
xor를 사용하여 원본 이미지와 목표 이미지를 조합합니다.
| 기술 세부 사항 | 기본값: |
|---|
브라우저 지원
표에서 숫자는 해당 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
