HTML5 강좌 13강 - HTML5 태그 - canvas 그림자스타일,도형합성하기

HTML5 강좌 13강 - HTML5 태그 - 그림자스타일,도형합성하기

*그림자 스타일 지정하기

그림자 스타일을 지정하기 위해 다음과 같은 속성을 사용합니다.

(1)shadowColor

그림자 색깔 지정 (기본 값: 투명)

(2)shadowOffsetX

대상을 기준으로 그림자의 X 좌표 지정 (기본 값: 0)

(3)shadowOffsetY

대상을 기준으로 그림자의 Y 좌표 지정 (기본 값: 0)

(4)shadowBlur

그림자의 흐린 정도 지정 (기본 값: 0)

예제를 통해 테스트 해보겠습니다.

context.shadowOffsetX = 10; 

context.shadowOffsetY = 10; 

context.shadowColor = '#474747'; 

context.shadowBlur = 1; 

context.fillStyle = "#000000";

context.fillRect(120, 120, 100, 100);

shadowOffsetX와 shadowOffsetY를 이용해 원본에서의 간격을 설정합니다.

shadowColor를 이용해 그림자의 색상을 지정하고요.

shadowBlur를 이용해 투명도를 지정하고 사각형을 그렸습니다.

이번에는 도형을 합치는 속성에 대해 알아보겠습니다.

*도형합성하기

도형을 합성하기 위해서 globalCompositeOperation 이라는 속성을 사용하는데요.

globalCompositeOperation은 여러가지 속성값을 가지고 있습니다.

context.fillStyle = 'red'; 

context.fillRect(10, 60, 150, 50);

context.fillStyle = 'blue'; 

context.fillRect(60, 10, 50, 150);

먼저 globalCompositeOperation 속성을 사용하지 않고 도형을 겹치게 설정한다면..

위 그림처럼 나중에 그려진 도형이 먼저 그려진 도형 위로 올라갑니다.

하지만 여러가지 속성의 값을 사용하여 합치는 형태를 바꿀 수 있습니다.

source-atop : 처음 그려진 도형 영역만 표시 -> 겹쳐진 부분은 나중에 그려진 도형이 표시됨

source-in : 나중에 그려진 도형의 겹쳐지는 부분만 표시됨

source-out : 나중에 그려진 도형에서 겹쳐지지 않는 부분만 표시됨

source-over : 처음 그려진 도형 위에 나중에 그려진 도형이 표시됨

destination-atop : 나중에 그려진 도형 영역만 표시 -> 겹쳐진 부분은 처음에 그려진 도형이 표시됨

destination-in : 처음에 그려진 도형의 겹쳐지는 부분만 표시됨

destination-out : 처음에 그려진 도형에서 겹쳐지지 않는 부분만 표시됨

destination-over : 나중에 그려진 도형 위에 처음에 그려진 도형이 표시됨

lighter : 두 도형이 모두 표시 -> 겹쳐진 부분은 두 색의 합을 구하여 표시됨

copy : 나중에 그려진 도형만 표시됨

xor : 두 도형이 모두 표시 -> 겹쳐진 부분은 투명하게 표시됨

darker : 두 도형이 모두 표시 -> 겹쳐진 부분은 두 색의 차이 값을 구하여 표시됨

이중에서 몇 가지 속성을 테스트 해보죠~

*source-in 테스트 입니다.

*destination-in 테스트 입니다.

*lighter 테스트 입니다.

*xor 테스트 입니다.

(예제는 첨부파일에서 받을 수 있습니다.)