HTML Canvas – 그리기

HTML Canvas 그래픽 그리기 기법

HTML Canvas를 사용하면 다양한 그래픽 요소를 그릴 수 있다. 이 문서에서는 Canvas에서 선, 사각형, 원, 텍스트 및 그라데이션을 그리는 방법에 대해 설명한다.

Canvas 좌표 이해하기

Canvas는 2차원 그리드 시스템을 사용한다. 좌표는 왼쪽 상단 모서리를 기준으로 (0,0)에서 시작한다.

Canvas에서 픽셀 위치를 지정할 때, x 좌표는 왼쪽에서 오른쪽으로, y 좌표는 위에서 아래로 증가한다.

💡 Canvas 좌표 시스템:
• 원점(0,0)은 Canvas의 왼쪽 상단에 위치한다.
• X축은 오른쪽으로 갈수록 증가한다.
• Y축은 아래쪽으로 갈수록 증가한다.

Canvas에서 선 그리기

Canvas에서 선을 그리려면 다음 단계를 따라야 한다.

1. beginPath() 메소드로 새 경로 시작
2. moveTo() 메소드로 시작점 설정
3. lineTo() 메소드로 끝점 설정
4. stroke() 메소드로 실제 선 그리기

다음은 선을 그리는 간단한 예제이다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

위 코드는 Canvas의 왼쪽 상단에서 시작하여 대각선으로 선을 그린다.

여러 선 그리기

여러 선을 연결해서 그리려면 여러 lineTo() 메소드를 연속해서 호출하면 된다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(20, 100);

ctx.lineTo(70, 100);

ctx.stroke();

Canvas에서 사각형 그리기

사각형을 그리는 세 가지 메소드가 있다.

• fillRect(x, y, width, height): 채워진 사각형
• strokeRect(x, y, width, height): 테두리만 있는 사각형
• clearRect(x, y, width, height): 지정된 영역을 투명하게 지움

채워진 사각형

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(20, 20, 150, 100);

테두리 사각형

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.strokeStyle = "blue";

ctx.strokeRect(20, 20, 150, 100);

사각형 영역 지우기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(20, 20, 150, 100);

ctx.clearRect(50, 50, 50, 50);

Canvas에서 경로 만들기

경로(path)는 선과 곡선의 집합으로, 더 복잡한 모양을 만드는 데 사용한다. 경로를 만드는 단계는 다음과 같다.

1. beginPath(): 새 경로 생성
2. 경로 메소드: 원하는 경로를 정의
3. closePath(): 경로 종료(선택사항)
4. stroke() 또는 fill(): 경로를 그리거나 채움

Canvas에서 그라데이션 만들기

Canvas에서 두 가지 유형의 그라데이션을 만들 수 있다.

• createLinearGradient(x0, y0, x1, y1): 선형 그라데이션
• createRadialGradient(x0, y0, r0, x1, y1, r1): 원형 그라데이션

선형 그라데이션

선형 그라데이션을 만드는 단계는 다음과 같다.

1. createLinearGradient() 메소드로 그라데이션 객체 생성
2. addColorStop() 메소드로 색상 중지점 추가
3. fillStyle 속성에 그라데이션 할당
4. 도형 그리기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

원형 그라데이션

원형 그라데이션을 만드는 단계는 다음과 같다.

1. createRadialGradient() 메소드로 그라데이션 객체 생성
2. addColorStop() 메소드로 색상 중지점 추가
3. fillStyle 속성에 그라데이션 할당
4. 도형 그리기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createRadialGradient(100, 50, 5, 90, 60, 100);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

💡 그라데이션 팁:
• addColorStop() 메소드의 첫 번째 매개변수는 0과 1 사이의 값이어야 한다.
• 0은 그라데이션의 시작, 1은 그라데이션의 끝을 의미한다.
• 여러 색상 중지점을 추가하여 복잡한 그라데이션을 만들 수 있다.

Canvas에서 원 그리기

Canvas에서 원을 그리려면 arc() 메소드를 사용한다. 이 메소드는 다음과 같은 매개변수를 가진다.

완전한 원을 그리려면 시작 각도는 0, 종료 각도는 2*Math.PI(360도)로 설정한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 50, 40, 0, 2 * Math.PI);

ctx.stroke();

채워진 원 그리기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 50, 40, 0, 2 * Math.PI);

ctx.fillStyle = "green";

ctx.fill();

Canvas에서 텍스트 그리기

Canvas에서 텍스트를 그리는 두 가지 방법이 있다.

• fillText(text, x, y): 채워진 텍스트
• strokeText(text, x, y): 텍스트 윤곽선

채워진 텍스트 그리기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

텍스트 윤곽선 그리기

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World", 10, 50);

텍스트 스타일 지정

다음 속성을 사용하여 텍스트 스타일을 지정할 수 있다.

• font: 크기와 글꼴을 지정
• textAlign: 텍스트 정렬 방식(start, end, left, right, center)
• textBaseline: 텍스트 기준선(top, hanging, middle, alphabetic, ideographic, bottom)
• fillStyle: 텍스트 색상(채우기)
• strokeStyle: 텍스트 윤곽선 색상

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Comic Sans MS";

ctx.fillStyle = "red";

ctx.textAlign = "center";

ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Canvas 그리기 기법 정리

HTML Canvas는 다양한 그래픽 요소를 그리는 강력한 도구다. 위에서 설명한 기본 기술을 조합하면 복잡한 애니메이션이나 인터랙티브한 그래픽 요소를 만들 수 있다. 코드 예제를 실습하며 Canvas 그래픽 기법을 익히는 것이 좋다.