Canvas 도형 함수 완전 정리

 

 

HTML Canvas

Canvas 도형 함수 완전 정리

arc, path, closePath, drawCircle, drawPolygon을 함수화 관점에서 한 번에 정리합니다.

0 오늘 분석할 코드

<canvas id="myCanvas" width="220" height="220"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function drawCircle(ctx, x, y, radius) {{
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.stroke();
}}

function drawPolygon(ctx, xArray, yArray) {{
  ctx.beginPath();
  ctx.moveTo(xArray[0], yArray[0]);
  for (let i = 1; i < xArray.length; i++) {{
    ctx.lineTo(xArray[i], yArray[i]);
  }}
  ctx.closePath();
  ctx.stroke();
}}

drawCircle(context, 100, 100, 80);
drawPolygon(context, [100, 10, 150, 210], [10, 100, 200, 60]);
</script>

canvas브라우저 화면에 픽셀 기반 그림을 그리는 HTML 요소입니다.

context2D 그리기 명령을 실행하는 객체입니다.

beginPath()새 경로를 시작해 이전 도형과 섞이지 않게 합니다.

arc()원이나 원호를 경로에 추가합니다.

moveTo()선을 긋지 않고 시작 위치만 옮깁니다.

lineTo()현재 위치에서 지정 좌표까지 선 경로를 추가합니다.

closePath()끝점에서 시작점으로 경로를 닫습니다.

stroke()현재 경로를 선으로 실제 출력합니다.

---

1 Canvas 함수화가 필요한 이유

캔버스 명령은 순서가 길어지기 쉽습니다. 원, 다각형, 선 같은 반복 도형은 함수로 묶어야 좌표만 바꿔 여러 번 그릴 수 있습니다.

• drawCircle(ctx, x, y, radius)는 중심 좌표와 반지름만 받습니다.
• drawPolygon(ctx, xArray, yArray)는 x좌표 배열과 y좌표 배열을 같은 인덱스로 묶습니다.
• 함수 안에서 beginPath를 호출하면 이전 경로가 섞이지 않습니다.
• 함수 밖에서는 canvas, context, 실제 좌표 데이터만 준비하면 됩니다.

---

2 arc()로 원 그리기

인수	의미	예시
x	원의 중심 x좌표	100
y	원의 중심 y좌표	100
radius	반지름	40
startAngle	시작 각도	0
endAngle	끝 각도	2 * Math.PI
anticlockwise	반시계 방향 여부	true 또는 false

완전한 원은 0부터 2*Math.PI까지 그립니다. 반원이나 부채꼴은 시작과 끝 각도를 다르게 잡습니다.

---

3 beginPath()의 역할

beginPath는 새 경로를 시작한다는 선언입니다. 이 호출이 없으면 이전에 등록된 선, 원호, 닫힌 경로가 다음 stroke에 함께 그려질 수 있습니다.

1. 새 도형을 그리기 직전에 beginPath를 호출합니다.
2. moveTo, lineTo, arc 같은 명령으로 경로를 설명합니다.
3. stroke 또는 fill로 실제 화면에 출력합니다.
4. 다음 도형을 그릴 때 다시 beginPath를 호출합니다.

---

 

반응형

 

4 moveTo()와 lineTo()

moveTo는 펜을 종이에서 떼고 위치만 옮기는 명령이고, lineTo는 현재 위치에서 지정 좌표까지 선 경로를 추가하는 명령입니다.

moveTo 없이 lineTo만 쓰면 브라우저가 현재 경로의 마지막 위치를 기준으로 삼기 때문에 의도하지 않은 선이 생길 수 있습니다.

• 첫 좌표는 moveTo로 시작점을 잡습니다.
• 두 번째 좌표부터 lineTo로 연결합니다.
• 다각형은 좌표 배열을 순서대로 순회하면 됩니다.
• 좌표 순서가 바뀌면 도형 모양도 바뀝니다.

---

5 closePath()의 의미

closePath는 현재 끝점에서 시작점까지 자동으로 선을 이어 경로를 닫습니다. 삼각형, 사각형, 다각형의 마지막 변을 직접 lineTo로 쓰지 않아도 됩니다.

사용	결과
closePath 없음	마지막 점과 시작점이 연결되지 않을 수 있습니다.
closePath 있음	도형이 닫혀 stroke와 fill 결과가 자연스럽습니다.
fill 사용	닫힌 경로에서 내부 영역을 예측하기 쉽습니다.
stroke 사용	마지막 변까지 자동으로 표시됩니다.

---

6 drawCircle 함수 해석

function drawCircle(ctx, x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.stroke();
}

이 함수는 컨텍스트와 좌표를 외부에서 받아 원을 그립니다. ctx를 인수로 받기 때문에 다른 캔버스에도 같은 함수를 재사용할 수 있습니다.

• x, y는 원의 왼쪽 위가 아니라 중심점입니다.
• radius가 커질수록 원이 커지고 캔버스 밖으로 나갈 수도 있습니다.
• strokeStyle과 lineWidth는 함수 호출 전이나 함수 안에서 설정할 수 있습니다.
• fill을 추가하면 내부가 채워진 원으로 바뀝니다.

---

7 drawPolygon 함수 해석

function drawPolygon(ctx, xArray, yArray) {
  ctx.beginPath();
  ctx.moveTo(xArray[0], yArray[0]);
  for (let i = 1; i < xArray.length; i++) {
    ctx.lineTo(xArray[i], yArray[i]);
  }
  ctx.closePath();
  ctx.stroke();
}

같은 인덱스의 xArray와 yArray 값을 하나의 점으로 보고 순서대로 연결합니다. 배열 길이가 다르면 일부 좌표가 undefined가 될 수 있습니다.

---

8 원호 예제 읽기

원호 예제는 arc의 시작 각도와 끝 각도를 바꾸면서 전체 원, 반원, 일부 호를 비교합니다. Math.PI는 180도에 해당하고 2*Math.PI는 360도에 해당합니다.

표현	각도 감각	설명
0	0도	오른쪽 방향에서 시작합니다.
Math.PI / 2	90도	아래쪽 방향입니다.
Math.PI	180도	왼쪽 방향입니다.
1.5 * Math.PI	270도	위쪽 방향입니다.
2 * Math.PI	360도	한 바퀴 전체입니다.

---

9 좌표 배열 점검

다각형 함수에서 xArray와 yArray는 한 쌍으로 움직입니다. xArray[2]와 yArray[2]가 세 번째 꼭짓점입니다.

1. 두 배열의 길이가 같은지 확인합니다.
2. 첫 점이 도형의 시작점으로 적절한지 봅니다.
3. 점의 순서가 시계 방향 또는 반시계 방향으로 이어지는지 봅니다.
4. 좌표가 캔버스 width와 height 범위 안에 있는지 확인합니다.

---

10 스타일 적용 위치

strokeStyle, fillStyle, lineWidth는 경로를 만들기 전이나 stroke/fill 직전에 설정할 수 있습니다. 중요한 것은 실제 출력 명령이 실행되기 전에 값이 정해져 있어야 한다는 점입니다.

• context.strokeStyle = "magenta"는 선 색을 바꿉니다.
• context.lineWidth = 3은 선 굵기를 바꿉니다.
• context.fillStyle = "skyblue"는 채우기 색을 바꿉니다.
• 여러 도형을 그릴 때는 도형마다 스타일을 명확히 다시 지정하는 습관이 좋습니다.

---

11 실전 개선 아이디어

개선	방법
채워진 원	stroke 대신 fill을 호출합니다.
색상 인수 추가	drawCircle(ctx, x, y, r, color)처럼 확장합니다.
좌표 객체 배열	[{x:10,y:20}] 형태로 다각형 좌표를 관리합니다.
도형 초기화	그리기 전에 clearRect로 이전 화면을 지웁니다.
랜덤 도형	Math.random으로 좌표와 반지름을 만들어봅니다.

---

12 검증 체크리스트

• canvas 요소의 id와 getElementById 인수가 일치합니다.
• getContext("2d") 호출 이후에 그리기 명령을 실행합니다.
• 새 도형마다 beginPath를 호출합니다.
• 경로만 만든 뒤 stroke나 fill을 빠뜨리지 않습니다.
• 배열 좌표는 길이와 순서를 함께 확인합니다.
• 각도 계산에는 degree가 아니라 radian을 사용합니다.

---

M 자주 하는 실수

실수	문제	해결
beginPath를 생략함	이전 경로가 다음 도형과 함께 그려질 수 있습니다.	도형 함수 시작 부분에 beginPath를 둡니다.
arc 각도를 degree로 입력함	Canvas는 radian 단위를 사용합니다.	180도는 Math.PI, 360도는 2*Math.PI로 씁니다.
xArray와 yArray 길이가 다름	undefined 좌표가 생겨 다각형이 깨집니다.	두 배열 길이를 먼저 맞춥니다.
closePath를 빠뜨림	마지막 점과 시작점이 연결되지 않습니다.	닫힌 도형은 closePath 후 stroke 또는 fill을 호출합니다.
stroke 호출을 잊음	경로만 만들고 화면에 보이지 않습니다.	경로 설명 후 stroke나 fill을 반드시 실행합니다.

핵심 한 줄 요약

circlearc(x, y, r, 0, 2*Math.PI)는 완전한 원의 기본 공식입니다.

pathbeginPath로 시작하고 moveTo/lineTo/arc로 경로를 설명한 뒤 stroke합니다.

function반복 도형은 ctx와 좌표를 인수로 받는 함수로 분리하면 재사용하기 쉽습니다.

Tags

#Canvas#JavaScript#arc#beginPath#closePath#drawCircle#drawPolygon#lineTo#moveTo#티스토리

▼ 티스토리 태그 입력란 복사용

Canvas, JavaScript, arc, beginPath, closePath, drawCircle, drawPolygon, lineTo, moveTo, 티스토리