2.2 캔버스 그리기(Canvas Drawing)

2.2.1 캔버스 경로와 선 그리기

1. path(경로)

경로란, 캔버스에 그리기 위한 도형이나 선 등의 연속된 점들의 집합을 의미합니다. 경로를 사용하여 아래와 같은 단계를 거쳐 선을 그릴 수 있습니다.

1. 경로를 생성합니다.
2. 경로에 그리기 명령을 사용해 경로상에 그립니다.
3. 경로가 만들어지면, 윤곽선을 그리거나 도형 내부를 채워 경로를 렌더링합니다.

2. path methods

이러한 단계를 수행하기 위해서는 Path 메서드가 필요합니다. Path 메서드는 HTML5 캔버스(Canvas)에서 경로(path)를 그리기 위해 사용되는 메서드들의 집합입니다. 이 메서드들은 CanvasRenderingContext2D 객체의 메서드로, 경로를 만들고 변형하는 데 사용됩니다.

경로 생성하기

beginPath()는 새로운 경로를 생성하는 메서드입니다. 경로를 생성한 후에는 그리기 명령을 통해 경로를 구성하고 만드는 데 사용합니다. 이 메서드를 호출하면 이전에 그렸던 경로는 삭제되고, 새로운 경로를 시작합니다.

경로 닫기

closePath()는 경로를 닫는 메서드입니다. 이 함수를 호출하면, 현재 경로의 시작점과 끝점을 연결하여 경로를 닫습니다. beginPath()와 함께 사용되며, 경로를 그리고 난 뒤에 호출하여 경로를 닫아줍니다. 이를 통해, 경로가 닫히게 되면, 캔버스 상에서 경로 내부를 채울 수 있습니다.

경로 그리기