Canvas(7)_합성 및 클리핑

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다.

 

---

 

앞선 예제에서는 이미 그려진 도형 위에 그렸으나 도형 합성이 필요할 때에는 속성을 설정함으로써 가능하게 만들 수 있다.

 

1. 도형 합성 -  globalCompositeOperation = type

기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 canvas의 특정 부분을 지우는 효과를 얻을 수 있다.

 

새로운 도형을 그릴 때, 도형 합성 방법을 설정한다.

더 자세한 type 종류는 아래 이미지를 참고하자.

 

---

 

2. 잘라내기 경로(Clipping Path)

  다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 한다.

위 이미지를 보면 별 모양이 잘라내기 경로이며, 해당 경로 밖에 있는 모든 것은 canvas에 그려지지 않을 것이다.

 

위 globalCompositeOperation과 잘라내기 경로의 가장 중요한 차이점은 Clipping Path 자체는 canvas에 전혀 그려지지 않는다는 점이다.

즉, Clipping Path는 제한된 영역 안에서 여러가지 도형을 그리는 데에 적합하다.

 

---

 

3. Clip()

현재 그려지는 경로를 현재 잘라내기 경로로 만든다.

경로를 닫기 위해 closePath() 대신 clip()을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 Clipping Path로 만들 수 있다.

 

<canvas> 요소의 초기 설정값으로, canvas는 canvas와 똑같은 크기의 잘라내기 경로를 가진다.

그러나 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않는다.