HTML5웹프로그래밍 13강 - 캔버스 (2)
Canvas 2D 컨텍스트에 선형·원형·원뿔형 그라데이션, 이미지 패턴, 그림자와 합성 모드를 적용하는 방법을 학습한다. 이어서 텍스트와 외부 이미지를 그리는 방법, 좌표계를 이동·회전·확대·반전하는 변환과 상태 저장·복원의 원리를 정리한다.
1. Canvas 스타일 지정의 흐름
Canvas에서는 도형을 그리는 명령과 도형에 적용할 스타일을 분리해 생각해야 한다. 먼저 CanvasRenderingContext2D 객체에서 그라데이션·패턴 같은 스타일 객체를 생성하고, 필요한 속성을 설정한 뒤 fillStyle 또는 strokeStyle에 지정하여 실제 그리기 명령을 호출한다.
기본 순서: 스타일 객체 생성 → 스타일 세부 설정 → fillStyle 또는 strokeStyle에 지정 → fill(), stroke(), fillRect(), fillText() 등의 그리기 실행
Canvas의 그리기 상태에는 fillStyle, strokeStyle, 그림자, 선 스타일, 글꼴, 합성 모드, 변환 행렬 등이 포함된다. save()는 현재 상태를 스택에 저장하고 restore()는 가장 최근 상태로 되돌린다. 여러 효과를 국소적으로 적용하려면 save()와 restore()를 짝지어 사용하는 습관이 중요하다.
2. 그라데이션 공통 원리
Canvas 2D API는 선형, 원형, 원뿔형 그라데이션 객체를 만든다. 그라데이션 자체는 색이 아니라 CanvasGradient 객체이므로 생성만 해서는 화면에 나타나지 않는다. addColorStop()으로 색상 정지점을 지정하고 fillStyle이나 strokeStyle에 할당해야 한다.
| 종류 | 생성 메서드 | 색상 변화 방식 |
|---|---|---|
| 선형 | createLinearGradient() | 두 점을 잇는 축을 따라 변화 |
| 원형·방사형 | createRadialGradient() | 두 원 사이에서 방사형으로 변화 |
| 원뿔형 | createConicGradient() | 중심 주위를 각도 방향으로 변화 |
addColorStop(offset, color)의 offset은 0.0부터 1.0 사이의 위치이고 color는 CSS 색상값이다. 정지점은 여러 개 추가할 수 있다. 같은 위치에 서로 다른 색을 연속 지정하면 부드러운 혼합 대신 경계가 선명한 하드 스톱을 만들 수 있다.
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 120);3. 선형 그라데이션
createLinearGradient(x1, y1, x2, y2)는 시작점 (x1,y1)과 끝점 (x2,y2)을 잇는 선을 기준으로 색이 변하는 그라데이션을 만든다. 축의 방향과 길이에 따라 색상 변화 방향과 간격이 정해진다.
const grad = ctx.createLinearGradient(0, 0, 200, 200);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "yellow");
grad.addColorStop(1, "blue");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);(0,0)에서 (200,0)으로 지정하면 가로 방향, (0,0)에서 (0,200)이면 세로 방향, (0,0)에서 (200,200)이면 대각선 방향으로 색이 변한다. 그라데이션 좌표는 도형 자체의 경계가 아니라 현재 Canvas 좌표계에 놓인 그라데이션 축을 정의한다.
색상 정지점을 0.33 위치에 같은 값으로 두 번 배치하는 식으로 명확한 경계를 만들 수 있다. 이를 이용하면 여러 색의 띠, 국기와 같은 분할 배경, 단계적인 시각화를 표현할 수 있다.
4. 원형·원뿔형 그라데이션
createRadialGradient()
createRadialGradient(x1,y1,r1,x2,y2,r2)는 내부 원과 외부 원 사이에서 색이 퍼지는 그라데이션을 만든다. 두 원의 중심을 같게 하면 동심원 형태가 되고, 중심을 다르게 하면 빛이 비스듬히 비치는 구나 입체적인 광원 효과를 만들 수 있다.
const radial = ctx.createRadialGradient(
100, 100, 10,
100, 100, 90
);
radial.addColorStop(0, "white");
radial.addColorStop(0.3, "yellow");
radial.addColorStop(1, "green");
ctx.fillStyle = radial;
ctx.fillRect(0, 0, 200, 200);createConicGradient()
createConicGradient(startAngle,x,y)는 중심 (x,y)에서 시작 각도를 기준으로 색이 회전하며 변하는 원뿔형 그라데이션을 만든다. 각도는 도(deg)가 아니라 라디안으로 지정한다. 0에서 1 사이의 색상 정지점은 한 바퀴의 상대 위치를 나타낸다.
const conic = ctx.createConicGradient(0, 150, 150);
conic.addColorStop(0, "red");
conic.addColorStop(0.25, "orange");
conic.addColorStop(0.5, "green");
conic.addColorStop(0.75, "blue");
conic.addColorStop(1, "red");
ctx.fillStyle = conic;
ctx.fillRect(50, 50, 200, 200);원뿔형 그라데이션은 색상환, 파이 차트, 게이지, 회전 애니메이션에 적합하다. 부채꼴 영역만 보이게 하려면 arc()로 경로를 만든 뒤 fillStyle에 원뿔형 그라데이션을 사용한다.
5. 이미지 패턴 만들기
createPattern(image, repetition)은 이미지나 다른 Canvas를 반복해 채우는 CanvasPattern 객체를 만든다. 반환된 패턴을 fillStyle 또는 strokeStyle에 지정하면 도형 내부나 선에 반복 무늬를 적용할 수 있다.
| 반복값 | 동작 |
|---|---|
| repeat | 가로와 세로 모두 반복 |
| repeat-x | 가로 방향만 반복 |
| repeat-y | 세로 방향만 반복 |
| no-repeat | 반복하지 않음 |
const image = new Image();
image.onload = function () {
const pattern = ctx.createPattern(image, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
image.src = "smile.png";이미지는 비동기로 로드되므로 onload 이후에 createPattern()과 그리기를 실행해야 한다. 패턴 자체가 준비된 이후에는 translate(), rotate(), scale() 등의 좌표 변환을 이용해 패턴의 위치와 방향, 크기가 달라진 효과를 만들 수 있다.
6. 그림자 스타일
Canvas 그림자는 채우기·선·텍스트·이미지 등의 픽셀 그리기에 적용된다. shadowColor가 투명한 기본값이면 다른 그림자 속성을 지정해도 그림자가 보이지 않는다.
| 속성 | 역할 |
|---|---|
| shadowColor | 그림자 색상 |
| shadowBlur | 그림자 흐림 정도, 음수는 허용되지 않음 |
| shadowOffsetX | 그림자의 가로 이동 거리 |
| shadowOffsetY | 그림자의 세로 이동 거리 |
ctx.save();
ctx.shadowColor = "rgba(0, 0, 0, 0.4)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 10;
ctx.fillStyle = "#fef3c7";
ctx.fillRect(50, 50, 200, 120);
ctx.restore();네온사인처럼 빛나는 효과는 밝은 shadowColor와 큰 shadowBlur를 사용하고 offset을 0으로 두어 만들 수 있다. 그림자는 이후의 그리기에도 계속 영향을 주므로 필요한 범위를 save()/restore()로 감싸거나 속성을 초기화해야 한다.
7. 도형 합성과 globalCompositeOperation
새 도형을 그릴 때 기존 Canvas 픽셀과 어떤 방식으로 결합할지 globalCompositeOperation으로 정한다. 새로 그리는 도형을 source, 이미 Canvas에 존재하는 그림을 destination이라고 한다.
| 모드 | 의미 |
|---|---|
| source-over | 새 도형을 기존 그림 위에 그림, 기본값 |
| source-in | 새 도형 중 기존 그림과 겹친 부분만 표시 |
| source-out | 새 도형 중 기존 그림과 겹치지 않은 부분만 표시 |
| source-atop | 새 도형을 기존 그림의 영역 안에 표시 |
| destination-over | 새 도형을 기존 그림 뒤에 배치 |
| destination-out | 새 도형과 겹친 기존 그림 부분을 지움 |
| copy | 기존 그림을 버리고 새 도형만 남김 |
| xor | 두 도형이 겹치지 않는 부분을 남김 |
multiply, screen, overlay, lighten 같은 혼합 모드는 두 레이어의 색을 수학적으로 섞는다. multiply는 대체로 어두워지고 screen은 밝아지며 overlay는 명암을 강조한다.
합성 모드는 뒤의 모든 그리기에 영향을 주므로 save()로 상태를 저장하고 필요한 합성을 마친 뒤 restore()하는 것이 안전하다. destination-out으로 구멍을 뚫거나 source-in으로 원형 프로필 사진을 만드는 등 마스크 효과에도 활용할 수 있다.
8. Canvas 텍스트 그리기
Canvas 텍스트는 HTML 텍스트 노드가 아니라 글자 모양으로 계산된 픽셀 그림이다. 따라서 검색·선택·복사·자동 줄바꿈 같은 일반 문서 기능이 기본으로 제공되지 않는다.
| 메서드·속성 | 역할 |
|---|---|
| fillText(text,x,y,maxWidth) | 채워진 텍스트 그리기 |
| strokeText(text,x,y,maxWidth) | 윤곽선 텍스트 그리기 |
| font | CSS font 단축 속성과 같은 형식으로 글꼴 지정 |
| textAlign | 기준 x 좌표에 대한 가로 정렬 |
| textBaseline | 기준 y 좌표에 대한 세로 기준선 |
ctx.font = "bold 40px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "navy";
ctx.fillText("Hello Canvas!", canvas.width / 2, canvas.height / 2);textAlign에는 left, right, center, start, end 등을 사용할 수 있다. textBaseline에는 top, hanging, middle, alphabetic, ideographic, bottom 등이 있다. 기본 기준선은 alphabetic이므로 화면 중앙에 정확히 맞추려면 center와 middle을 함께 사용하는 것이 편리하다.
9. 텍스트 측정과 자동 줄바꿈
measureText(text)는 현재 font 설정을 기준으로 TextMetrics 객체를 반환한다. 가장 자주 사용하는 width로 텍스트가 차지할 가로 길이를 알 수 있다. 텍스트를 가운데 정렬하거나 직접 줄바꿈 알고리즘을 만들 때 활용한다.
ctx.font = "20px Arial";
const text = "Hello Canvas!";
const metrics = ctx.measureText(text);
console.log(metrics.width);Canvas는 긴 텍스트를 자동으로 줄바꿈하지 않으며 문자열 안의 줄바꿈 문자도 일반 문단처럼 처리하지 않는다. 따라서 제한 너비를 넘지 않도록 단어를 하나씩 추가해 measureText()로 길이를 검사하고, 넘기 직전에 현재 줄을 fillText()로 그린 뒤 y 좌표를 lineHeight만큼 증가시키는 함수를 직접 작성해야 한다.
한글처럼 공백이 적거나 문자 단위 줄바꿈이 필요한 콘텐츠는 단어가 아니라 문자 단위로 측정하는 방식도 고려한다.
10. 외부 이미지와 drawImage()
외부 이미지는 Image 객체를 만들고 src를 지정하여 로드한다. 이미지가 완전히 로드되기 전에 drawImage()를 호출하면 그려지지 않을 수 있으므로 onload 안에서 실행한다.
const image = new Image();
image.onload = function () {
ctx.drawImage(image, 50, 50);
};
image.src = "photo.jpg";세 가지 호출 형식
| 형식 | 기능 |
|---|---|
| drawImage(image,dx,dy) | 원본 크기로 대상 위치에 그림 |
| drawImage(image,dx,dy,dw,dh) | 대상 크기로 확대·축소하여 그림 |
| drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) | 원본 일부를 잘라 대상 영역에 그림 |
sx, sy는 원본 이미지에서 잘라낼 시작 좌표이고 sw, sh는 원본에서 가져올 폭과 높이이다. dx, dy는 Canvas에 배치할 위치, dw, dh는 그려질 크기이다. 원본 잘라내기와 대상 확대·축소를 한 번에 수행할 수 있다.
11. Canvas 도형 변환의 원리
Canvas의 변환은 이미 그린 도형 자체를 다시 움직이는 것이 아니라 앞으로 그릴 때 사용할 좌표계를 바꾼다. 투명한 모눈종이인 좌표계를 이동·회전·확대한다고 생각하면 이해하기 쉽다. 변환 이후의 경로, 텍스트, 이미지에 모두 영향을 준다.
변환은 누적된다. translate() 뒤에 rotate()를 호출하면 이동한 좌표계를 다시 회전하며, 호출 순서를 바꾸면 결과도 달라진다. 특정 도형에만 변환을 적용하려면 save()로 현재 상태를 저장하고 변환과 그리기를 수행한 뒤 restore()로 원래 좌표계를 복원한다.
ctx.save();
ctx.translate(150, 150);
ctx.rotate(Math.PI / 4);
ctx.fillRect(-50, -50, 100, 100);
ctx.restore();12. translate·rotate·scale
translate(x,y)
translate(x,y)는 좌표계의 원점 (0,0)을 x, y만큼 이동한다. 이후 (0,0)에 그린 도형은 이동한 원점에 나타난다. 여러 도형을 각기 다른 위치에서 같은 좌표 코드로 그릴 때 편리하다.
rotate(angle)
rotate(angle)는 현재 원점을 중심으로 좌표계를 회전한다. 각도는 라디안이며 180도는 Math.PI, 45도는 45*Math.PI/180으로 환산한다. Canvas는 y축이 아래로 증가하므로 양의 각도는 화면에서 시계 방향 회전으로 보인다.
도형 중심을 기준으로 회전하려면 도형 중심으로 translate한 뒤 rotate하고, 도형을 중심 기준 좌표로 그린다. 왼쪽 위를 원점으로 둔 채 rotate하면 도형이 예상 밖의 위치로 이동해 보일 수 있다.
scale(x,y)
scale(x,y)는 좌표계의 단위 크기를 바꾼다. 1보다 크면 확대, 0과 1 사이면 축소한다. 음수 배율은 해당 축을 반전한다. scale(-1,1)은 좌우 반전, scale(1,-1)은 상하 반전 효과를 만든다.
확대·축소는 도형뿐 아니라 좌표, 선 굵기, 텍스트와 이미지에도 영향을 줄 수 있다. 반전 후에는 좌표 방향이 바뀌므로 translate와 조합하여 화면 안의 원하는 위치에 놓아야 한다.
13. transform()과 setTransform()
transform(a,b,c,d,e,f)는 이동·회전·확대·기울이기를 하나의 2D 변환 행렬로 표현하여 현재 변환 행렬에 추가로 곱한다. 매개변수 e와 f는 이동 성분이고 a, b, c, d는 크기·회전·기울임 성분을 구성한다.
| 인수 | 대표적 역할 |
|---|---|
| a | 가로 크기 성분 |
| b | 세로 방향 기울임·회전 성분 |
| c | 가로 방향 기울임·회전 성분 |
| d | 세로 크기 성분 |
| e | 가로 이동 |
| f | 세로 이동 |
setTransform(a,b,c,d,e,f)는 현재 변환을 초기화한 뒤 새 행렬을 설정한다. 반면 transform()은 기존 변환 위에 누적한다. 항등 변환은 (1,0,0,1,0,0)이며 setTransform(1,0,0,1,0,0)을 사용하면 기본 좌표계로 되돌릴 수 있다.
// 기존 변환에 추가
ctx.transform(1, 0.2, 0.1, 1, 30, 20);
// 기존 변환을 버리고 새 변환 지정
ctx.setTransform(1, 0, 0, 1, 0, 0);핵심 개념 정리
Canvas 그라데이션은 createLinearGradient(), createRadialGradient(), createConicGradient()로 객체를 만들고 addColorStop()으로 색상 정지점을 추가한 뒤 fillStyle 또는 strokeStyle에 지정한다. 패턴은 createPattern()으로 만들며 외부 이미지는 로드가 끝난 뒤 사용해야 한다.
그림자는 shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY로 제어한다. globalCompositeOperation은 새 그림 source와 기존 그림 destination을 결합하는 방식을 정하며 마스크, 구멍, 혼합 효과에 활용된다. 상태가 다른 그리기에 퍼지지 않도록 save()/restore()를 사용한다.
fillText(), strokeText()는 Canvas에 픽셀 텍스트를 그리고 measureText()는 현재 글꼴 기준의 측정값을 반환한다. drawImage()는 원본 크기 그리기, 크기 조절, 원본 일부 잘라 그리기의 세 형태가 있다. Canvas 변환은 좌표계를 누적 변경하므로 호출 순서와 상태 복원이 중요하다.
예상문제 20선
1. Canvas에서 선형 그라데이션 객체를 만드는 메서드는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
createLinearGradient(x1,y1,x2,y2)는 두 점을 잇는 축을 따라 색이 변하는 CanvasGradient 객체를 만든다.
2. 그라데이션 객체에 색상 정지점을 추가하는 메서드는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
addColorStop(offset,color)은 0부터 1 사이 위치에 CSS 색상값을 추가한다.
3. 생성한 CanvasGradient를 채우기 스타일로 사용하려면 어떻게 해야 하는가?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
그라데이션 객체는 fillStyle 또는 strokeStyle에 지정한 뒤 채우기나 선 그리기 명령을 실행해야 화면에 나타난다.
4. createRadialGradient()가 정의하는 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
원형 그라데이션은 내부 원과 외부 원의 중심·반지름을 지정하여 두 원 사이에서 색이 변화한다.
5. createConicGradient()의 시작 각도 단위는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
Canvas의 회전·원뿔형 그라데이션 각도는 라디안으로 지정한다.
6. createPattern(image, "repeat-x")의 동작은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
repeat-x는 패턴 이미지를 가로 방향으로만 반복한다.
7. 외부 이미지로 패턴이나 그림을 만들 때 가장 먼저 고려할 사항은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
Image 객체는 비동기로 로드되므로 onload 이후에 createPattern() 또는 drawImage()를 호출해야 한다.
8. 그림자가 보이기 위한 핵심 속성은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
shadowColor의 기본값은 투명하므로 색상을 지정하지 않으면 blur나 offset을 설정해도 그림자가 보이지 않는다.
9. globalCompositeOperation에서 새로 그리는 도형을 무엇이라고 하는가?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
합성에서 새 도형은 source이고 이미 Canvas에 있던 그림은 destination이다.
10. globalCompositeOperation의 기본값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
source-over는 새 그림을 기존 그림 위에 그리는 일반적인 방식이며 기본 합성 모드이다.
11. 기존 그림과 겹치는 부분을 새 도형으로 지우는 데 적합한 모드는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
destination-out은 새 source와 겹친 기존 destination 픽셀을 제거하여 구멍을 뚫는 효과를 만든다.
12. Canvas에 채워진 텍스트를 그리는 메서드는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
fillText(text,x,y)는 현재 font와 fillStyle을 사용해 채워진 텍스트를 그린다.
13. textAlign="center"의 의미는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
textAlign은 기준 x 좌표에 대한 가로 정렬을 정하며 center는 텍스트 중앙을 x에 맞춘다.
14. measureText(text)의 주된 용도는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
measureText()는 TextMetrics를 반환하며 width를 이용해 가운데 정렬이나 직접 줄바꿈을 구현할 수 있다.
15. Canvas 텍스트의 자동 줄바꿈에 대한 설명으로 옳은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
Canvas는 문서 텍스트처럼 자동 줄바꿈하지 않으므로 문자열을 나누고 너비를 측정해 줄별로 직접 그려야 한다.
16. drawImage(image,dx,dy,dw,dh) 형식의 기능은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
5개 인수 형식은 이미지를 dx,dy 위치에 dw,dh 크기로 확대·축소하여 그린다.
17. drawImage()에서 원본 일부를 잘라 그리려면 몇 개의 인수 형식을 사용하는가?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
9개 인수 형식은 원본의 sx,sy,sw,sh 영역을 잘라 대상의 dx,dy,dw,dh 영역에 그린다.
18. Canvas 변환에 대한 설명으로 옳은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
Canvas 변환은 현재 좌표계를 바꾸어 이후의 그리기에 영향을 주고, restore하거나 초기화할 때까지 누적된다.
19. scale(-1,1)이 만드는 대표적 효과는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
X축 배율이 음수이면 좌우 방향이 뒤집히므로 scale(-1,1)은 좌우 반전 효과를 만든다.
20. transform()과 setTransform()의 차이로 옳은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
transform()은 현재 행렬에 새 행렬을 곱해 누적하지만 setTransform()은 현재 변환을 버리고 새 행렬로 바꾼다.
댓글
댓글 쓰기