이미지와 텍스트 다루기
Canvas에 이미지와 스타일이 적용된 텍스트를 그립니다.
이미지와 텍스트 다루기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이미지 불러오기
캔버스는 HTMLImageElement에서 이미지를 가져와 그립니다. 이미지 객체를 만들고 src를 설정한 다음, 그리기 전에 onload를 기다리세요. 그전에는 픽셀을 사용할 수 없습니다.
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";drawImage 기초
drawImage(img, dx, dy)는 지정한 위치에 이미지 본래 크기로 그립니다.
img.onload = () => {
ctx.drawImage(img, 20, 20);
};이미지 크기 조절하기
인수가 5개인 형식인 drawImage(img, dx, dy, dWidth, dHeight)은 이미지를 대상 상자에 맞게 크기를 조절합니다.
ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90원본 사각형으로 자르기
인수가 9개인 형식을 사용하면 이미지를 자를 수 있습니다. drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)에서 처음 네 인수가 원본에서 가져올 영역을 나타냅니다.
ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100채워진 텍스트 그리기
fillText(text, x, y)는 fillStyle을 사용하여 텍스트를 그립니다. 기본적으로 y는 텍스트 기준선입니다.
ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);윤곽선 텍스트
strokeText(text, x, y)는 strokeStyle과 lineWidth를 사용하여 윤곽선만 그립니다.
ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);글꼴 속성
font는 CSS 단축 표기 형식을 따릅니다. 형식은 [style] [weight] size family이며, 크기와 글꼴 이름은 필수입니다.
ctx.font = "italic bold 28px Georgia, serif";텍스트 정렬
textAlign(시작/끝/왼쪽/오른쪽/가운데)은 가로 기준점을 설정하고, textBaseline(위/가운데/알파벳 기준선/아래)은 지정한 점을 기준으로 세로 기준점을 설정합니다.
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);텍스트 측정하기
measureText(text)는 TextMetrics 객체를 반환합니다. 이 객체의 width는 텍스트가 렌더링될 너비를 알려 주므로 레이아웃과 줄 바꿈에 필수적입니다.
const m = ctx.measureText("How wide?");
console.log(m.width); // pixels간단한 단어 줄 바꿈
measureText를 반복문과 함께 사용하여 긴 문자열을 여러 줄로 나눌 수 있습니다.
function wrap(ctx, text, x, y, maxW, lh) {
let line = "";
for (const word of text.split(" ")) {
const test = line + word + " ";
if (ctx.measureText(test).width > maxW && line) {
ctx.fillText(line, x, y);
line = word + " ";
y += lh;
} else {
line = test;
}
}
ctx.fillText(line, x, y);
}깊이감을 위한 그림자
그림자 속성은 도형, 이미지, 텍스트에 적용됩니다. shadowColor, shadowBlur, shadowOffsetX/Y를 사용합니다.
ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);빠른 확인
이미지와 텍스트 그리기에 대한 이해도를 확인해 보세요.
복습: 이미지와 텍스트
drawImage를 사용하여 이미지를 불러오고 크기 조절과 자르기를 적용해 그리는 방법, fillText/strokeText로 텍스트를 렌더링하는 방법, font를 설정하고 텍스트를 정렬하는 방법, measureText로 너비를 측정하는 방법, 그림자를 추가하는 방법을 배웠습니다. 다음에는 애니메이션을 알아봅니다.
자주 묻는 질문
“이미지와 텍스트 다루기” 강의는 무료인가요?
네 — “이미지와 텍스트 다루기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“이미지와 텍스트 다루기”에서 뭘 배우나요?
Canvas에 이미지와 스타일이 적용된 텍스트를 그립니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“이미지와 텍스트 다루기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.