예
두 개의 서로 다른 globalCompositeOperation 값을 사용하여 사각형을 그립니다. 빨간색 사각형은 destination images . 파란색 사각형은 source images :
소스 오버
목적지 오버
자바 스크립트 :
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);
»그것을 자신을 시도 브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
소스 방법을 globalCompositeOperation 속성을 설정하거나 반환 (new) 이미지가 목적지에 그려은 (existing) 이미지를.
소스 이미지 = 도면 당신은 캔버스에 배치하려고합니다.
대상 이미지 = 이미 캔버스 상에 배치 한 도면.
| 기본값: | 소스 오버 |
|---|---|
| 자바 스크립트 구문 : | context .globalCompositeOperation="source-in"; |
속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| source-over | 태만. 대상 이미지를 통해 원본 이미지를 표시합니다 | »플레이 |
| source-atop | 목적지 이미지의 상단에 원본 이미지를 표시합니다. 부분의 source image 외측 인 destination image 도시하지 | »플레이 |
| source-in | 대상 이미지의 원본 이미지를 표시합니다. 의 부분 만 source image 내 인 destination image 도시하고, destination image 투명 | »플레이 |
| source-out | 대상 이미지에서 원본 이미지를 표시합니다. 의 부분 만 source image 외측 인 destination image 도시하고, destination image 투명 | »플레이 |
| destination-over | 소스 이미지를 통해 대상 이미지를 표시합니다 | »플레이 |
| destination-atop | 소스 이미지의 상단에있는 대상 이미지를 표시합니다. 의 부분 destination image 외측 인 source image 도시하지 않은 | »플레이 |
| destination-in | 소스 이미지에서 대상 이미지를 표시합니다. 의 부분 만 destination image 내 인 source image 도시되고, source image 투명 | »플레이 |
| destination-out | 소스 이미지에서 대상 이미지를 표시합니다. 의 부분 만 destination image 외측 인 source image 도시되고, source image 투명 | »플레이 |
| lighter | 소스 이미지 + 대상 이미지를 표시합니다 | »플레이 |
| copy | 원본 이미지를 표시합니다. 대상 이미지는 무시됩니다 | »플레이 |
| xor | 소스 화상은 배타적 OR를 이용하여 타겟 이미지와 결합 | »플레이 |
<캔버스 개체