예
두 개의 서로 다른 globalCompositeOperation 값을 사용하여 사각형을 그립니다. 빨간색 사각형은대상 이미지입니다.파란색 사각형은원본 이미지입니다:
소스 오버
대상 오버
자바 스크립트 :
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);
»그것을 자신을 시도 브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬, 사파리는 globalCompositeOperation 속성을 지원합니다.
참고 : 인터넷 익스플로러 8 이전 버전은 지원하지 않습니다 <canvas> 요소를.
정의 및 사용
소스 (신규) 이미지가 목적지에 그려집니다 방법을 globalCompositeOperation 속성을 설정하거나 반환 이미지 (기존)를.
클래스 = "notranslate"소스 캔버스에 배치하려고합니다 이미지 = 도면.
destination image = 이미 캔버스에 배치 도면.
| 기본값: | 소스 오버 |
|---|---|
| 자바 스크립트 구문 : | context.globalCompositeOperation="source-in"; |
속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| source-over | 태만. 대상 이미지 위에 원본 이미지를 표시합니다 | »플레이 |
| source-atop | 목적지 이미지의 상단에 원본 이미지를 표시합니다.대상 이미지밖에소스 이미지의일부가 도시되어 있지 않다 | »플레이 |
| source-in | 대상 이미지의 원본 이미지를 표시합니다.대상 이미지안에소스 이미지의부분 만이 도시되고, 상기대상 이미지는투명 | »플레이 |
| source-out | 대상 이미지에서 원본 이미지를 표시합니다.대상 이미지밖에소스 이미지의부분 만이 도시되고, 상기대상 이미지는투명 | »플레이 |
| destination-over | 소스 이미지 위에 대상 이미지 표시 | »플레이 |
| destination-atop | 소스 이미지의 상단에 목적지 이미지를 표시합니다.소스 이미지밖에대상 이미지의일부가 도시되어 있지 않다 | »플레이 |
| destination-in | 소스 이미지에서 대상 이미지를 표시합니다.소스 이미지안에대상 이미지의부분 만이 도시되고,소스 이미지는투명 | »플레이 |
| destination-out | 소스 이미지에서 대상 이미지를 표시합니다.소스 이미지밖에대상 이미지의부분 만이 도시되고,소스 이미지는투명 | »플레이 |
| lighter | 소스 이미지 + 대상 이미지를 표시합니다 | »플레이 |
| copy | 원본 이미지를 표시합니다. 대상 이미지는 무시됩니다 | »플레이 |
| xor | 소스 이미지는 단독 사용하거나 대상 이미지와 결합 | »플레이 |
예
모든 globalCompositeOperation 속성 값 :
소스 이상 :
소스 꼭대기 :
소스에서 :
원 아웃 :
대상 오버 :
대상-꼭대기 :
목적지 인 :
대상 아웃 :
거룻배:
부:
XOR :