코딩스쿨

▶ HTML Graphics

HTML Canvas

1. HTML Canvas란?

HTML Canvas는 웹 페이지에서 동적으로 그래픽을 그릴 수 있는 HTML5 요소입니다. canvas 요소는 비트맵 형식의 그래픽을 생성할 수 있도록 도와주며, JavaScript를 사용하여 2D 및 3D 렌더링을 지원합니다. 주로 게임 개발, 데이터 시각화, 애니메이션, 이미지 처리 등에 사용됩니다.

2. HTML Canvas 기본 구조

HTML의 <canvas> 태그는 고정된 크기의 그림 영역을 정의합니다. 이 영역 내에서 JavaScript를 통해 그래픽 요소를 그릴 수 있습니다. 기본적으로, <canvas> 태그는 300px x 150px의 크기를 가지지만, width와 height 속성을 통해 크기를 변경할 수 있습니다.

기본 예시:


<canvas id="myCanvas" width="500" height="400"></canvas>

JavaScript를 사용하여 이 <canvas> 요소에 접근하고, 다양한 그래픽 작업을 수행할 수 있습니다.

3. Canvas API 주요 메서드

canvas 요소를 사용하려면 JavaScript의 getContext() 메서드를 통해 그리기 컨텍스트에 접근해야 합니다. 이 메서드는 주로 2D 그래픽을 그리기 위한 2d 컨텍스트를 반환합니다.


const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx 객체를 통해 다양한 그래픽 작업을 수행할 수 있습니다.

4. Canvas API 기본 메서드 및 속성

4.1 사각형 그리기

메서드	설명	예시
`fillRect(x, y, width, height)`	사각형을 그리며, 채워진 사각형을 그립니다.	`ctx.fillRect(50, 50, 100, 100);`
`strokeRect(x, y, width, height)`	사각형의 윤곽선을 그립니다.	`ctx.strokeRect(50, 50, 100, 100);`
`clearRect(x, y, width, height)`	사각형 영역을 지워 투명하게 만듭니다.	`ctx.clearRect(50, 50, 100, 100);`

4.2 경로 그리기

메서드	설명	예시
`beginPath()`	새로운 경로를 시작합니다.	`ctx.beginPath();`
`moveTo(x, y)`	경로의 시작점을 이동합니다.	`ctx.moveTo(100, 100);`
`lineTo(x, y)`	경로를 지정한 좌표로 연결합니다.	`ctx.lineTo(200, 200);`
`stroke()`	현재 경로를 따라 윤곽선을 그립니다.	`ctx.stroke();`

4.3 텍스트 그리기

메서드	설명	예시
`fillText(text, x, y)`	지정된 위치에 텍스트를 그립니다.	`ctx.fillText('Hello, Canvas!', 100, 50);`
`strokeText(text, x, y)`	윤곽선을 따라 텍스트를 그립니다.	`ctx.strokeText('Hello, Canvas!', 100, 50);`

5. HTML Canvas 예시

5.1 기본 사각형 그리기


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 사각형 그리기</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 채워진 사각형
    ctx.fillStyle = "blue";  // 채우기 색 설정
    ctx.fillRect(50, 50, 150, 100);

    // 윤곽선 사각형
    ctx.strokeStyle = "red";  // 윤곽선 색 설정
    ctx.strokeRect(250, 50, 150, 100);

    // 사각형 영역 지우기
    ctx.clearRect(275, 75, 100, 50);
</script>

</body>
</html>

이 예시는 두 개의 사각형을 그리고, 그 중 하나의 일부를 지우는 간단한 예시입니다.

5.2 선과 텍스트 그리기


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 경로 및 텍스트 그리기</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 경로 그리기
    ctx.beginPath();
    ctx.moveTo(50, 50);  // 시작점
    ctx.lineTo(150, 150);  // 첫 번째 선
    ctx.lineTo(50, 150);  // 두 번째 선
    ctx.closePath();  // 경로 닫기
    ctx.stroke();  // 경로를 윤곽선으로 그리기

    // 텍스트 그리기
    ctx.font = "30px Arial";
    ctx.fillText("Hello, Canvas!", 50, 250);
</script>

</body>
</html>

이 예시에서는 선을 그리기 위한 경로를 정의하고 텍스트를 캔버스에 그립니다.

6. Canvas의 색상 및 스타일 설정

6.1 색상 설정

fillStyle: 채우기 스타일을 설정합니다.
strokeStyle: 윤곽선 스타일을 설정합니다.

예시:


ctx.fillStyle = "green";
ctx.fillRect(100, 100, 200, 100);

ctx.strokeStyle = "blue";
ctx.strokeRect(100, 100, 200, 100);

6.2 그라디언트 및 패턴

캔버스에서는 그라디언트와 패턴을 사용하여 더욱 복잡한 그래픽 스타일을 적용할 수 있습니다.

그라디언트: createLinearGradient(x0, y0, x1, y1) 메서드를 사용하여 선형 그라디언트를 만들 수 있습니다.
패턴: createPattern(image, repetition)을 사용하여 이미지를 반복 패턴으로 설정할 수 있습니다.

그라디언트 예시:


const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

7. 애니메이션

캔버스에서는 requestAnimationFrame() 메서드를 사용하여 애니메이션을 구현할 수 있습니다. 이 메서드는 브라우저가 최적화된 방식으로 화면을 업데이트하는 데 적합한 시간을 자동으로 결정하여 부드러운 애니메이션을 만들 수 있게 합니다.

간단한 애니메이션 예시:


let x = 0;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // 캔버스를 지움
    ctx.fillStyle = "red";
    ctx.fillRect(x, 100, 50, 50);  // 이동하는 사각형

    x += 1;  // x 좌표 증가
    requestAnimationFrame(draw);  // 다음 프레임 요청
}

draw();  // 애니메이션 시작

위 코드는 requestAnimationFrame()을 사용하여 사각형이 화면에서 오른쪽으로 이동하는 간단한 애니메이션을 구현합니다.

8. 브라우저 호환성

HTML5 Canvas는 대부분의 최신 브라우저에서 지원됩니다. 다음은 Canvas API의 브라우저 지원 현황입니다:

브라우저	지원 여부
Chrome	Yes
Firefox	Yes
Safari	Yes
Edge	Yes
Internet Explorer	IE9+부터 지원

코딩 스쿨 HTML