JavaScript - Canvas 3 : arc(), beginPath()

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
ctx.fillRect(210, 200, 15, 100);
ctx.fillRect(350, 200, 15, 100);
ctx.fillRect(260, 200, 60, 200);

ctx.arc(290, 150, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(270, 145, 5, 0, 2 * Math.PI);
ctx.arc(310, 145, 5, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();

ctx.beginPath();
ctx.arc(290, 160, 30, 0, 1 * Math.PI);
ctx.fill();

역시 원을 그리는 법을 배우게 되었어.

자 원을 그릴때는 arc라는 메서드를 사용하는데,
ctx.arc(270, 145, 5, 0, 2 * Math.PI)
라고 되어있지?

이게 다 뭐냐면 앞에 있는 처음 두개는 x, y좌표를 의미하지. 그럼 이런 원들은 기준이 어디냐 하면 바로 중심이야. 내가 만들고 싶은 원의 중심에서 부터 원이 만들어지지.
그래서 270 x, 145 y 좌표에 원의 포인터가 오게 되고.
세번째 자리에는 이 원의 두께를 결정해. 그래서 5px정도의 두께를 가지게 하고.

여기가 좀 중요한데 - (0, 2 Math.PI) 인데 이게 뭐냐면
원을 그리는 시작점이 동그라미에서 3시라고 생각하면 돼.
즉 0은 시작점과, 2 Math.PI 이건 끝점인데.
0은 3시 0.5는 6시 1은 9시 1.5는 12시 2는 다시 3시
이런 방식으로 원이 그려져.
매우 쉽지. 그래서 0부터 2를 하니까 원이 다 그려지는 것이고, 0부터 1까지만 하면 반원이 그려지겠지. 매우 쉬워.