그림 영역이 겹칠때의 동작지정 HTML5



그림 영역이 겹칠때의 동작지정

 

 

먼저 그린 도형과 새롭게 그려진 도형이 겹쳐질때의 처리방법에 대한 메서드가 존재한다.

그리기 컨텍스트가 가진 globalCompositeOperation 속성이며, 가질 수 있는 값은 아래와 같다.

 

 source-atop

 원래 이미지가 표시된 영역에만 새로 그린 도형이 표시됨

 source-in 겹쳐진 부분만 표시됨
 source-out 나중에 그려진 그림 중에서 겹치지 않은 부분만 표시됨
 source-over 나중에 그려진 그림이 먼저 그려진 그림 위에 겹쳐서 표시됨
 destination-atop 나중에 그려진 그림 영역이 표시 대상이 됨, 겹친 부분에서만 먼저 그린 그림이 표시됨
 destination-in 겹친 부분만 표시됨, 먼저 그렸던 그림만 표시됨
 destination-out 먼저 그린 그림중에서 겹치지 않은 부분만 표시됨
 destination-over 먼저 그린 그림이 나중에 그린 그림위에 겹쳐서 표시됨
 lighter 먼저 그린 그림과 나중에 겹치게 그린 그림을 모두 표시함
 copy 나중에 그린 그림만 표시됨
 xor 먼저 그린 그림과 나중에 겹치게 그린 그림을 모두 표시함, 겹친 부분은 공란

 

globalCompositeOperation 속성의 기본값은 source-over 이다.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210