HTML5 도형 합성하기

HTML5 도형 합성하기

 

globalCompositeOperation 속성의 값을 지정함으로써 도형을 그린 순서와 상관없이 겹쳐지는 부분에 대한 처리를 수행합니다.

 

도형 합성 형식

형식

context.globalCompositeOperation = 스타일;

예제

context.fillStyle = 'blue';            context.fillRect (120,  120,  100,  100);             context.globalCompositeOperation = 'darker';          context.fillStyle = 'red';           context.arc(200, 200, 50, 0, 360*Math.PI/180, true); context.fill( )

 

globalCompositeOperation 속성 값

속성 값	설명
source-atop	처음 그려진 도형 위에 나중에 그려진 도형이 표시되지만 처음 그려진 도형 영역만 표시됨
source-in	처음 그려진 도형과 나중에 그려진 도형의 겹쳐진 부분만 표시됨
source-out	나중에 그려진 도형에서 겹쳐지지 않은 부분만 표시됨
source-over	처음 그려진 도형 위에 나중에 그려진 도형이 표시됨
destination-atop	나중에 그려진 도형 영역만 표시되지만 겹쳐지는 부분은 처음 그린 그림이 표시됨
destination-in	처음 그려진 도형과 나중에 그려진 도형의 겹쳐진 부분만 표시되지만 나중에 그린 도형이 표시됨
destination-out	처음 그려진 도형에서 겹쳐지지 않은 부분만 표시됨
destination-over	처음 그려진 도형이 나중에 그려진 도형 위에 표시됨
lighter	처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만 겹쳐지는 부분은 두 색의 합을 구하여 표시됨
copy	나중에 그려진 도형만 표시됨
xor	처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만 겹쳐지는 부분은 투명하게 표시됨
darker	처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만 겹쳐지는 부분은 두 색의 차이값을 구하여 표시됨

 

도형 합성 실습 프로그램