HTML 캔버스 globalCompositeOperation 속성
예시
두 개의 서로 다른 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);
브라우저 지원
Internet Explorer 9, Firefox, Opera, Chrome 및 Safari는 globalCompositeOperation 속성을 지원합니다.
정의 및 사용
globalCompositeOperation 속성은 소스(새) 이미지가 대상(기존) 이미지에 그려지는 방법을 설정하거나 반환합니다.
원본 이미지 = 캔버스에 배치하려는 그림.
대상 이미지 = 이미 캔버스에 배치된 그림.
| 기본값: | 소스 오버 |
|---|---|
| 자바스크립트 구문: | 컨텍스트 .globalCompositeOperation="소스 입력"; |
속성 값
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
| destination-over | Displays the destination image over the source image | |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
| lighter | Displays the source image + the destination image | |
| copy | Displays the source image. The destination image is ignored | |
| xor | The source image is combined by using an exclusive OR with the destination image |
예시
모든 globalCompositeOperation 속성 값: