[자바스크립트 - Canvas] 1. 시작하기 - 도형 그리기

해당 내용은 MDN을 참고하여 작성하였습니다.

캔버스란

HTML에서 Canvas는 HTML5에서 추가된 요소 중 하나로, 웹 페이지에서 그래픽을 그리기 위한 도화지나 캔버스를 제공합니다.Canvas 요소는 JavaScript를 사용하여 2D 그래픽 및 애니메이션을 만들 수 있습니다. 또한 WebGL과 같은 기술을 사용하여 3D 그래픽을 그리기도 합니다.

 

Canvas 요소는 width와 height 속성을 사용하여 그려질 영역의 크기를 지정할 수 있으며, 그리기 작업은 Canvas API를 사용하여 수행됩니다.Canvas를 사용하면 동적으로 그래픽을 그릴 수 있으며, 게임, 데이터 시각화, 인터랙티브 애니메이션 등의 웹 애플리케이션을 만드는 데 사용됩니다.

 

HTML에서 캔버스는 아래와 같이 추가할 수 있습니다. 기본적으로 width와 height를 지정하지 않으면 width 300px, height 150px로 지정됩니다.

<canvas id="tutorial" width="150" height="150"></canvas>

 

캔버스 사용해보기

캔버스 API를 통해서 캔버스에 화면에 그릴 수 있습니다.

 

네모 그리기

캔버스에서 도형은 직사각형 하나만 제공합니다. 나머지 도형을 그리기 위해서는 path와 여러점으로 이루어진 선으로 만들어집니다.
네모를 그리기 위해서는 아래 3가지가 존재합니다.

1. fillRect : 배경색을 가진 직사각형을 그립니다.
   • 색상을 지정하지 않을 시 기본은 black입니다.
   • 색상을 지정하기 위해서는 해당 함수 호출 전 ctx.fillStyle = ‘color’로 설정하면 됩니다.
2. strokeRect : 윤곽선을 가진 직사각형을 그립니다.
   • border는 w와 h에 포함되지 않습니다.
     • w가 100이라면 border까지 포함한 w는 102입니다.
3. clearRect : 해당 사각형이 위치한 부분을 지우는 직사각형을 그립니다.

 

세개의 함수 모두 x, y, width, height 를 파라미터로 가집니다.

 

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

 

 

 

 

 

경로 그리기

 

beginPath
새로운 경로를 만들 때 가장 먼저 호출이 되어야 합니다. 새로운 경로를 생성하는 역할을 합니다.

 

 

moveTo
moveTo 는 경로를 그리기 위해서 시작 위치를 지정하는 것입니다. x, y 좌표를 파라미터로 가집니다. moveTo의 또 하나의 중요한 점은 경로를 그리는 위치를 옮길 수 있습니다. 캔버스에서 경로를 그릴때 연결되는 모든 점(or 선)을 연결합니다. 하지만 연결되지 않은 경로를 그리고 싶을 때는 moveTo를 이용해서 새로운 시작 위치를 지정하면 됩니다.

See the Pen CANVAS Line by suld2495 (@suld2495) on CodePen.

 

 

lineTo
이전에 그려진 지점에서부터 지정된 x, y 까지 경로를 그립니다.

See the Pen CANVAS LineTo by suld2495 (@suld2495) on CodePen.

 

 

fill
그려진 경로에 배경색을 칠합니다. 이때 경로가 자동으로 닫히게 되어 closePath를 호출하지 않아도 됩니다.

See the Pen CANVAS Fill by suld2495 (@suld2495) on CodePen.

 

 

stroke
그려긴 경로에 윤곽선을 그려줍니다. fill과 돨리 자동으로 닫히지 않기 때문에 필요하다면 closePath를 호출하여야 합니다. 이때 closePath를 먼저 호출 후 stroke를 호출해야 정상적으로 윤곽선이 나오는 것을 확인하였습니다.

See the Pen CANVAS Stroke by suld2495 (@suld2495) on CodePen.

 

 

arc
호 또는 원을 그릴 때 사용합니다. arc(x, y, radius, startAngle, endAngle, anticlockwise). x와 y는 시작 위치를, radius는 반지름을 뜻합니다. startAngle, endAngle 은 원의 시작점과 끝점을 라디안 단위로 정의합니다. anticlockwise 는 원을 시계방향으로 그릴지 반시계 방향으로 그릴지를 정하며, true일때 반시계 방향입니다.

 

 x와 y는 호의 center의 위치를 말합니다.

 

원을 그릴때는 아래와 같이 사용합니다. startAngle에는 0을 endAngle에는 Math.PI * 2 를 값으로 설정하면 원이 그려집니다.

See the Pen CANVAS Arc by suld2495 (@suld2495) on CodePen.

 

베지어 곡선

베지어 곡선이란

조절점을 연결하는 선 위를 일정한 속도로 움직이는 점이 존재하고 해당 점들을 연결하는 또 다른 선과 그 선을 지나가는 점 등을 조합하여 곡선을 그립니다. 간단히 말하면 복수의 조절점을 이용하여 곡선을 그리는 방법을 말합니다. 대체로 2개의 점은 고정되어 있고 나머지 조절점을 이용하여 곡선의 모양을 결정합니다.

 

2개의 조절점이 존재하는 경우에는 직선만 그릴 수 있습니다. 세개의 조절점이 존재하는 경우 2차 베지에 곡선이라고 부릅니다. 그리고 네개의 조절점이 존재하는 경우 3차 베지에 곡선이라 부릅니다.

 

 

quadraticCurveTo

이차 베지어 곡선을 그리는데 사용합니다.

quadraticCurveTo(cp1x, cp1y, x, y)

 

bezierCurveTo

삼차 베지어 곡선을 그리는데 사용합니다.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

 

 

💥 중요

canvas에서는 이미 그려진 대상을 옮긴다는 개념이 존재하지 않습니다. 실제 스케치북에 그림을 그리것과 유사하게 이미 그려진 것을 옮길 수 없고 해당 지점을 지우는 것만 존재합니다. 그래서 애니메이션 효과를 내기 위해서는 기존에 그려진 부분을 지우고 다시 그려야 합니다.

clearRect(x: number, y: number, w: number, h: number)