[Javascript] Canvas API

웹에서 UI를 그리는 방식은 크게 3가지입니다.

1. HTML DOM

   • document객체에 접근하여 그릴 수 있습니다.

2. SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)

   • 다른 방식들이 래스터 이미지로 구성되어 점들로 이루어진 반면에 SVG는 직선과 곡선으로 이루어져 있습니다

   • 그렇기 때문에 확대하여도 이미지가 깨져보이지 않습니다.

   • 대용량을 렌더링할 필요가 있을 때, DOM방식 보다 오래걸리고 메모리 측면에서 과부하가 심하게 걸립니다.

3. Canvas

   • 메모리 과부하가 적고 응답속도가 빠릅니다.

   • interaction처리(click, mouseover)가 불가능합니다.

 

이중에서 Canvas에 대해서 알아보도록 합시다.

 

---

CANVAS API

• 캔버스에서는 좌측상단의 좌표가 (0, 0)입니다. 이 좌표를 중심으로 도형, 선, 곡선을 그려 UI를 그릴 수 있습니다.

Canvas의 좌표 - 출처 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

 

• 캔버스에서 제공하는 도형은 직사각형 뿐입니다. 다른 도형을 표현하고 싶다면 선과 점을 이용하여 그려야 합니다. 
• 직사각형을 그릴 때 도와주는 함수들이 있습니다.

function fillRect(x, y, width, height)
// 지정된 색으로 채워진 직사각형을 그립니다.

function strokeRect(x, y, width, height)
// 직사각형의 윤곽선을 그립니다.

function clearRect(x, y, width, height)
// 특정 부분을 지우는 직사각형을 그립니다. 지워진 부분은 투명해집니다.

 

• 직사각형을 제외한 다른 도형을 그리고 싶다면 선(Path)를 이용할 수 있습니다.

function beginPath()
// 새로운 경로를 만들겠다고 알리는 함수입니다.

function closePath()
// 시작부분과 마지막으로 끝난 경로의 지점을 연결하는 직선을 추가합니다.

function stroke()
// 윤곽선을 이용하여 도형이 그려집니다.

function fill()
// 경로의 내부를 지정된 색으로 채워줍니다.

function moveTo(x, y)
// 지정된 좌표로 펜을 이동합니다. 이 과정에서 그려지는 것은 없습니다. beginPath가 호출되고 시작지점을 지정해주는 것이 좋습니다.

function lineTo(x, y)
// 지정된 좌표까지 직선을 그려줍니다.

function arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 중점이 (x, y), 반지름의 크기가 radius, 시작 각도와 끝 각도까지 이어지는 호를 그려줍니다. 이때 시계방향인지 시계반대인지 정할 수 있고, 원을 그려주는 것이 아니라 호를 그려주는 것을 주의해야 합니다.
// 오른쪽 x축이 0도이고 왼쪽이 180도(PI)입니다.

 

• 도형과 선을 그리고 fillStyle을 지정해서 채우는 색을 설정할 수 있고, strokeStyle을 지정해서 윤곽선 색을 설정할 수 있습니다.

• 점선을 그릴 수 도 있습니다.

function setLineDash([ length1 , length2 ... ])
// 선이 그려질 때 점선으로 그려지도록 합니다. 이때, 인자의 배열의 첫번째 원소 길이만큼 실선이 그려지고 다음 원소에서 공백이 그려지고 다음에 또 실선이 그려지는 과정이 반복됩니다.

 

• Gradient 효과를 부여할 수 있습니다.

• 선형으로 그려줄 수도 있고 원을 사용하여 그려줄 수도 있습니다.

function createLinearGradient(x1, y1, x2, y2)
// 시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를 (x2, y2)로 하는 선형 Gradient 객체를 생성합니다.

function createRadialGradient(x1, y1, r1, x2, y2, r2)
// 반지름이 r1이고 좌표 (x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표 (x2, y2)를 중심으로 하는 원을 사용하여 Gradient 객체를 생성합니다.

gradient.addColorStop(position, color)
// position의 위치에 지정된 색으로 된 중단점을 생성합니다.
// position은 0부터 1까지 지정할 수 있으며, 0이 시작점이고 1이 종료점 입니다.

 

• 캔버스의 상태를 저장하고 복원할 수 있습니다.

• 이는 기본 캔버스의 상태를 보존하고 다른 특징을 가지는 도형을 그리고 싶을 때 유용하게 사용됩니다.

• 캔버스가 저장될 때는 stack에 push 하고, 복원할 때는 stack에서 pop하는 방식으로 이루어져 있습니다.

function save()
// 캔버스의 상태를 저장합니다.

function restore()
// 최근에 저장된 상태를 복원합니다.

 

• 캔버스의 원점(좌측상단)을 원하는 위치로 옮길 수 있습니다.

• 또한 현재 원점을 기준으로 회전하는 동작 또한 가능합니다.

• 변경하기전에 save하고 동작을 수행하는 것이 권장됩니다.

function translate(x, y)
// 현재 원점에서 지정된 위치만큼 떨어진 곳으로 원점을 이동시킵니다.

function rotate(angle)
// 지정된 각도만큼 현재 원점을 기준으로 시계방향으로 캔버스를 회전시킵니다.

 

• 그리고자하는 요소를 확대하거나 축소하여 그리게 할 수도 있습니다.

function scale(x, y)
// 가로, 세로의 길이를 지정된 수치만큼 곱해주어서 확대/축소하여 그릴 수 있습니다.

 

이렇게 다양한 API들이 존재하여 화면에 원하는 UI를 그릴 수 있습니다.

 

편리하게 사용할 수 있는 라이브러리나 프레임워크가 많지만, Canvas에 대해서 공부를 하고 라이브러리나 프레임워크들이 내부적으로 어떻게 동작하는지 짐작할 수 있습니다. 내부적인 원리를 알고 사용하는 것과 모르고 사용하는 것에 큰 차이가 있다고 생각하니 한번쯤은 공부할만한 주제라고 생각합니다!

 

---

 

참고사이트

https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial