Canvas 원호 · 선 스타일 완전 정리

 

 

Web Development · Canvas

Canvas 원호 · 선 스타일

arc 원호, lineWidth, strokeStyle, 도형 서식 폼을 정리합니다.

시작 오늘 분석할 코드

Canvas는 HTML 안에 그림을 그릴 수 있는 비트맵 영역입니다. canvas 요소 자체는 도화지고, 실제 선과 도형은 JavaScript에서 2D context를 얻어 그립니다.

context.beginPath(); context.arc(100, 70, 30, 0, 1.5 * Math.PI, false); context.strokeStyle = 'magenta'; context.stroke(); context.lineWidth = 20; context.strokeStyle = 'violet';

arc원호 또는 원 경로를 추가합니다.

Math.PI라디안 각도 계산에 쓰입니다.

lineWidth선 굵기입니다.

strokeStyle선 색상입니다.

input color색상 선택 폼입니다.

range범위 값을 입력받는 폼입니다.

---

1 arc 기본 구조

arc(x, y, r, startAngle, endAngle, anticlockwise)는 중심 좌표와 반지름, 시작/끝 각도, 방향으로 원호를 만듭니다.

인자	의미	예시
x, y	중심 좌표	100, 70
r	반지름	30, 50
startAngle	시작 각도	0
endAngle	끝 각도	1.5*Math.PI
anticlockwise	반시계 방향 여부	true/false

---

2 라디안 각도

Canvas arc는 각도를 도(deg)가 아니라 라디안으로 받습니다. 원 한 바퀴는 2*Math.PI입니다.

도	라디안	의미
0도	0	오른쪽 방향
90도	Math.PI/2	아래쪽 방향 기준
180도	Math.PI	반 바퀴
270도	1.5*Math.PI	3/4 바퀴
360도	2*Math.PI	한 바퀴

---

3 원호 두 개 그리기

원호 예제는 magenta 원호와 blue 원호를 각각 beginPath로 분리해 그립니다. beginPath가 없으면 두 원호가 같은 경로로 묶일 수 있습니다.

첫 원호

반지름 30, 0부터 1.5π까지 magenta로 그립니다.

두 번째 원호

반지름 50, π/2부터 π까지 blue로 그립니다.

---

 

반응형

 

4 lineWidth와 strokeStyle

선 스타일 예제는 직선, 사각형, 원호에 각각 다른 lineWidth와 strokeStyle을 적용합니다.

도형	lineWidth	strokeStyle
직선	기본 1	blue
사각형	10	yellowgreen
원호	20	violet
공통	경로별 지정	stroke로 반영

---

5 스타일 상태 주의

Canvas context의 lineWidth와 strokeStyle은 상태처럼 남습니다. 새 도형을 그리기 전에 필요한 스타일을 다시 지정하는 습관이 좋습니다.

beginPath는 경로를 새로 만들지만 모든 스타일 상태를 초기화하지는 않습니다. 선 굵기와 색은 필요한 시점에 명시합니다.

---

6 도형 서식 폼

도형 서식 폼 예제는 select, number, color, range, datalist를 사용해 선 종류, 두께, 색, 투명도를 입력받는 UI를 만듭니다.

입력 요소	역할	예시
select	선 종류 선택	선없음, 실선, 점선
number	선 두께	1~50
color	선 색상	#00bfff
range	투명도	0~100
datalist	range 눈금 설명	투명, 중간, 불투명

---

7 폼 값과 Canvas 연결

원본 폼은 입력 UI만 만들지만, 실제로는 폼 값을 읽어 context.lineWidth, strokeStyle, globalAlpha 같은 속성에 연결할 수 있습니다.

폼 값	Canvas 속성	설명
선두께	lineWidth	외곽선 두께
선색	strokeStyle	외곽선 색
투명도	globalAlpha	그리기 투명도
선종류	setLineDash	점선/실선 구현

---

8 자주 하는 실수

실수	증상	해결
라디안 대신 도 사용	원호가 예상과 다릅니다.	Math.PI 기준으로 변환합니다.
beginPath 누락	원호들이 연결되어 보입니다.	도형마다 beginPath를 사용합니다.
lineWidth 상태 착각	다음 도형도 굵게 그려집니다.	도형 전에 lineWidth를 명시합니다.
strokeStyle 설정 위치 오류	색이 기대와 다릅니다.	stroke 전에 설정합니다.
폼만 만들고 값 연결 없음	입력해도 그림이 안 바뀝니다.	input 값을 JS로 읽어 context에 적용합니다.

---

9 복습 체크리스트

체크	통과 기준
arc	중심, 반지름, 각도 인자를 설명합니다.
radian	Math.PI 기준 각도를 이해합니다.
lineWidth	선 굵기를 조정합니다.
strokeStyle	선 색을 조정합니다.
form	도형 서식 입력 UI를 설명합니다.
datalist	range 눈금 설명을 제공합니다.

---

10 추가 테스트

테스트	확인 내용
반지름 변경	arc 크기가 바뀌는지 확인합니다.
방향 변경	true/false 차이를 봅니다.
선 굵기 변경	lineWidth 1/10/20 차이를 봅니다.
색 변경	strokeStyle 적용 시점을 확인합니다.
폼 값 연결	number와 color 값을 context에 적용해 봅니다.

---

11 원호 각도 연습

arc는 시작 각도와 끝 각도를 바꾸면 같은 중심과 반지름으로도 전혀 다른 호를 그릴 수 있습니다. false와 true 방향 차이도 함께 확인합니다.

시작	끝	방향	결과
0	Math.PI/2	false	1/4 원호
0	Math.PI	false	반원
0	2*Math.PI	false	원
Math.PI/2	Math.PI	true	반대 방향 호

A

반지름 고정r을 그대로 두고 각도만 바꿉니다.

B

방향 비교false와 true를 번갈아 적용합니다.

C

색 분리각 원호마다 strokeStyle을 다르게 지정합니다.

D

경로 분리각 원호 앞에 beginPath를 넣습니다.

---

12 선 스타일 확장

lineWidth와 strokeStyle 외에도 lineCap, lineJoin, setLineDash 같은 속성으로 선의 끝 모양과 점선을 제어할 수 있습니다.

속성/메서드	역할	예시
lineCap	선 끝 모양	butt, round, square
lineJoin	선 연결 모서리	miter, round, bevel
setLineDash	점선 패턴	[5, 5]
globalAlpha	투명도	0.5
strokeStyle	선 색 또는 패턴	blue

---

13 폼 연결 연습

도형 서식 폼을 실제 Canvas와 연결하면 사용자가 고른 선 굵기와 색상으로 도형을 그릴 수 있습니다.

폼 요소	읽는 값	적용 위치
input[type=number]	value	context.lineWidth
input[type=color]	value	context.strokeStyle
input[type=range]	value / 100	context.globalAlpha
select	selected option	setLineDash 여부
button	click event	새 도형 그리기

---

14 Canvas 상태 점검

Canvas context는 색, 굵기, 투명도 같은 상태를 기억합니다. 원호와 선을 여러 개 그릴 때는 각 도형 앞에서 필요한 상태를 다시 지정하는 것이 안전합니다.

상태	기억 여부	권장
strokeStyle	다음 stroke에도 유지	도형마다 지정
lineWidth	다음 선에도 유지	굵기가 바뀌는 곳마다 지정
globalAlpha	이후 그리기에 영향	사용 후 원래 값 복구
lineDash	이후 선에 영향	실선으로 돌릴 때 [] 지정
path	beginPath 전까지 유지	도형마다 beginPath

1

경로 시작beginPath로 새 경로를 만듭니다.

2

도형 추가arc나 rect, lineTo로 경로를 구성합니다.

3

스타일 지정lineWidth와 strokeStyle을 설정합니다.

4

그리기stroke를 호출해 화면에 반영합니다.

---

15 최종 점검

점검	통과 기준
원호 중심	x, y 중심 좌표를 설명합니다.
반지름	r 값이 커지면 원호 크기가 커집니다.
각도	Math.PI 기준 라디안을 사용합니다.
방향	true/false 방향 차이를 확인합니다.
선 스타일	lineWidth와 strokeStyle을 stroke 전에 지정합니다.
폼 UI	number, color, range 값을 Canvas 속성과 연결할 수 있습니다.
상태	context 스타일 상태가 다음 그리기에 남을 수 있음을 압니다.

---

핵심 한 줄 요약

arcarc는 중심, 반지름, 라디안 각도, 방향으로 원호를 만듭니다.

stylelineWidth와 strokeStyle은 stroke 전에 지정합니다.

form폼 값을 읽으면 Canvas 선 스타일과 연결할 수 있습니다.

Tags

#Canvas#JavaScript#arc#Math.PI#lineWidth#strokeStyle#form#color#range#티스토리

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

Canvas, JavaScript, arc, Math.PI, lineWidth, strokeStyle, form, color, range, 티스토리