도형과 경로 그리기
직사각형, 호, 사용자 지정 경로를 렌더링합니다.
도형과 경로 그리기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
먼저 사각형 그리기
사각형에는 전용 단축 메서드가 있습니다. fillRect, strokeRect, clearRect가 그것이며, 각각 (x, y, width, height)를 인수로 받습니다.
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);경로 시작하기
사각형 이외의 것을 그리려면 경로를 만듭니다. beginPath()를 호출하여 새 경로를 시작하고, 선분을 추가한 다음 stroke() 또는 fill()을 호출합니다.
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo와 lineTo
moveTo(x, y)는 펜을 들어 올려 그리지 않고 지정한 위치로 옮깁니다. lineTo(x, y)는 현재 지점에서 새 지점까지 직선을 그립니다.
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();경로 닫기
closePath()는 시작점으로 돌아가는 선을 그려 윤곽선을 완성합니다. 다각형을 그릴 때 유용합니다.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();도형 채우기
fill()은 fillStyle을 사용하여 현재 경로의 내부를 칠합니다. 같은 경로를 채우고 윤곽선을 그릴 수도 있습니다.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();arc로 원 그리기
arc(x, y, radius, startAngle, endAngle)는 원호를 그립니다. 각도는 라디안 단위입니다. 완전한 원은 0에서 2 * Math.PI까지입니다.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();부분 원호와 파이 조각
시작 각도와 끝 각도를 사용하여 부채꼴을 그립니다. 파이 조각을 만들려면 lineTo를 중심점까지 연결하여 사용하세요.
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();2차 및 베지어 곡선
quadraticCurveTo(cpx, cpy, x, y)와 bezierCurveTo(...)는 제어점을 사용하여 매끄러운 곡선을 그립니다.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();선 스타일 지정하기
lineWidth, lineCap(평평한 끝/둥근 끝/사각형 끝), lineJoin(뾰족한 연결/둥근 연결/경사진 연결), setLineDash로 선의 모양을 제어합니다.
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();채우기 규칙
fill()은 겹치는 하위 경로를 어떻게 채울지 결정하도록 "nonzero"(기본값) 또는 "evenodd"를 받습니다. 구멍이 있는 도형에 유용합니다.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut채우기로 사용하는 그라데이션
createLinearGradient로 그라데이션을 만들고 색상 중단점을 추가한 다음 fillStyle에 할당합니다.
const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);빠른 확인
경로에 대한 이해도를 확인해 보세요.
복습: 도형과 경로
이제 사각형을 그리고, beginPath/moveTo/lineTo/closePath로 경로를 만들고, arc로 원을 그리며, 곡선을 추가하고, 선 스타일을 지정하고, 색이나 그라데이션으로 채울 수 있습니다. 다음에는 이미지와 텍스트를 알아봅니다.
자주 묻는 질문
“도형과 경로 그리기” 강의는 무료인가요?
네 — “도형과 경로 그리기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“도형과 경로 그리기”에서 뭘 배우나요?
직사각형, 호, 사용자 지정 경로를 렌더링합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“도형과 경로 그리기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.