JavaScript 입문 : Canvas 이론 정리 - 변환 Transformations (Save, Restore)

오랜만에 글을 쓰고자 시간을 내 봅니다. 공부라는 것이 항상 조금이라도 해당 분야에 대해 감을 유지해야 하는데 메인 직업이 아니다보니 약간 소홀하게 되네요. 다시한번 힘을 내어 하고자 하는 결과를 가져오고자 합니다. 

단, 이런 결심의 한계는 최종 목적지까지 정해 놓은 시일이 늦어지더라도 스스로에게 관대하여 생각보다 진도에 대한 일정이 늦추어 진다는데 있네요.

 

다시 내용을 정리하고자 하면 앞부분까지 원치않는 복습을 해야만 약간 감이라도 잡을 수 있는 것 같습니다. 

 

오늘은 지난시간 마우스 이벤트를 이용하여 간단한 그림판을 만드는 작업을 해 보았는데 CSS에도 있는 기능인 변환 또는 변형을 나타내는 Transformations에 대해 알아보고자 합니다.  

 

역시 Canvas 이론 정리는 '1분코딩의 Canvas 라이브 강좌'를 참조하고 있습니다. 

 

▒ Transformation 기초 : Save(  ) 메소드와 Restore(  ) 메소드 

 

Transformation의 주요기능을 알기 전에 Canvas내 그려지는 그림에 대하여 저장하고 복원하는 기능을 먼저 알 필요가 있습니다. 어떤 경우에 사용이 되는지 예제를 가지고 확인해 보도록 하겠습니다. 

 

1. Save(  )와 Restore(  )  메소드 

 

변형을 본격적으로 공부하기 전에 먼저 save(  ) 메소드에 대한 이해가 필요합니다. 말 그대로 저장하는 기능인데 어느 시점에 적용되는지가 중요합니다. 예제를 가지고 이해를 하도록 하겠습니다.

 

기본 Canvas를 만들어 보는데 가로 세로가 각각 500인 Canvas에서 보도록 하겠습니다. 

 

다음과 같이 기본형을 만들고 중앙에 크기가 가로 세로 100인 사각형을 만들어 보도록 합니다. 

 

 

 

이번에는 조금 위치를 바꾸어서 크기를 2배늘린 오렌지색 사각형으로 그려봅니다. 추가로 초록색원을 같이 그려 보면 코드와 브라우저는 다음과 같이 나타낼 수 있습니다. 

 

 

 

여기까지는 지난번 배웠던 그대로 적용할 수 있습니다. 그렇다면 save(  ) 메소드의 역할은 무엇일까요? save(  ) 메소드의 역할은 직전상태를 저장하는 기능을 가지고 있습니다. 

 

초록색 원을 만들기 전 save(  ) 메소드를 사용해 보겠습니다. 이 메소드만 사용하면 캔버스내 변화는 없습니다만, save(  ) 된 내용을 복원 시키는 restore(  ) 메소드를 사용하면 이야기는 달라집니다.

 

restore(  ) 메소드를 사용하고 초록색 원안에 작은 원을 그려 넣으면 다음과 같이 됩니다. 

 

 

 

상기 그림을 설명하면 save(   ) 사용되기 전 fillStyle은 orange색 이었습니다. restore(  )를 하고 초록색 안에 들어 가는 원을 그렸던니 save되어진 orange색의 작은 원이 그려진 결과를 볼 수 있습니다. 

 

2. 예제 풀이 

 

이런 원리를 이용하여 MDN에 나오는 그림을 예제로 삼아 만들어 보는 것을 추천 드립니다. 저도 한번 해 봐야겠어요. 

 

 

 

상기 그림을 분석해 보면 사각형이 총 5개가 들어가 있네요. ① ② ③ 번 사각형은 기존 방식처럼 그리면 될 듯 합니다. 다시 블루색으로 가기 위해서는 ②번에서 save(  ) 한 내용을 restore(  ) 하면 될 것 같습니다. 그리고 가운데 있는 검은색은 최초 save(  )에서 가능할 겁니다. 

 

즉, restore(  )의 역할은 바로 직전 save(  )를 호출하고 또 restore(  )가 나오면 더 직전 save(  )를 호출하는 역할을 합니다. 

강의에서는 이해가 안갔었는데 한번 해보니 이해가 되네요. 다음과 같이 코드를 만들 수 있습니다.

 

캔버스에 그림은 다음과 같이 비스하게 만들어 보았습니다.