▶ JavaScript Graphics

JavaScript Canvas

JavaScript Canvas: HTML5 Canvas를 이용한 그래픽 처리

HTML5 Canvas는 웹 페이지에서 비트맵 그래픽을 그릴 수 있도록 해주는 요소로, JavaScript를 사용하여 동적으로 그림을 그리고 애니메이션을 구현할 수 있는 강력한 기능을 제공합니다. 이 가이드는 Canvas의 기본 사용법, 그래픽 요소 그리기, 애니메이션 처리 및 실전 예제를 통해 Canvas를 활용하는 방법을 설명합니다.

1. Canvas란?

Canvas는 HTML5에서 도입된 요소로, <canvas> 태그를 사용하여 그래픽을 그릴 수 있는 공간을 제공합니다. Canvas는 JavaScript API를 통해 조작할 수 있으며, 픽셀 단위의 그래픽 처리가 가능합니다.

1.1. Canvas 요소 사용법

Canvas 요소를 사용하기 위해서는 HTML 문서에 <canvas> 태그를 추가해야 합니다.

기본 구조

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

id: Canvas 요소의 고유 식별자.
width: Canvas의 너비.
height: Canvas의 높이.

2. JavaScript를 이용한 Canvas 그래픽 그리기

JavaScript로 Canvas를 조작하기 위해서는 Canvas 요소의 2D 컨텍스트를 가져와야 합니다. 이를 통해 다양한 그래픽 요소를 그릴 수 있습니다.

2.1. 2D 컨텍스트 가져오기

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 2D 컨텍스트 가져오기

3. 기본 그래픽 그리기

3.1. 사각형 그리기

ctx.fillStyle = 'blue'; // 색상 설정
ctx.fillRect(50, 20, 150, 100); // 사각형 (x, y, width, height)

3.2. 원 그리기

ctx.beginPath(); // 새로운 경로 시작
ctx.arc(300, 100, 50, 0, Math.PI * 2); // 원 (x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'red'; // 색상 설정
ctx.fill(); // 원 채우기

3.3. 선 그리기

ctx.beginPath(); // 새로운 경로 시작
ctx.moveTo(20, 20); // 시작점 설정
ctx.lineTo(200, 20); // 끝점 설정
ctx.strokeStyle = 'green'; // 선 색상 설정
ctx.stroke(); // 선 그리기

4. 텍스트 그리기

Canvas에 텍스트를 추가할 수 있습니다.

ctx.font = '20px Arial'; // 폰트 설정
ctx.fillStyle = 'black'; // 텍스트 색상 설정
ctx.fillText('Hello, Canvas!', 50, 150); // 텍스트 (text, x, y)

5. 애니메이션 처리

Canvas에서 애니메이션을 만들기 위해 requestAnimationFrame을 사용할 수 있습니다. 이 메서드는 브라우저가 다음 화면을 다시 그릴 때 호출됩니다.

5.1. 애니메이션 예제

아래는 Canvas에 원이 움직이는 애니메이션을 만드는 예제입니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Animation Example</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript 코드 (script.js)

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

let x = 50; // 원의 시작 x 위치
const radius = 20; // 원의 반지름

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Canvas 지우기
    ctx.beginPath();
    ctx.arc(x, 100, radius, 0, Math.PI * 2); // 원 그리기
    ctx.fillStyle = 'blue';
    ctx.fill();

    x += 2; // x 위치 증가
    if (x > canvas.width + radius) {
        x = -radius; // 원이 화면을 넘어가면 다시 시작
    }

    requestAnimationFrame(animate); // 다음 프레임 요청
}

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

6. 마우스 이벤트 처리

Canvas에서 마우스 이벤트를 처리하여 사용자 상호작용을 구현할 수 있습니다.

6.1. 마우스 클릭 이벤트

canvas.addEventListener('click', function(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left; // 클릭한 x 좌표
    const y = event.clientY - rect.top; // 클릭한 y 좌표

    // 클릭한 위치에 원 그리기
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'green';
    ctx.fill();
});

7. 요약

JavaScript Canvas는 웹 페이지에서 그래픽을 그릴 수 있는 강력한 도구입니다. Canvas 요소와 JavaScript를 사용하여 비트맵 그래픽, 애니메이션 및 사용자 상호작용을 구현할 수 있습니다.

Canvas 요소: HTML5에서 비트맵 그래픽을 그릴 수 있는 공간.
JavaScript로 그래픽 그리기: 사각형, 원, 선, 텍스트 등을 그릴 수 있음.
애니메이션: requestAnimationFrame을 사용하여 부드러운 애니메이션 구현.
이벤트 처리: 마우스 클릭 이벤트를 통해 사용자 상호작용 처리.

JavaScript를 활용하여 다양한 그래픽과 애니메이션을 웹에서 구현할 수 있습니다.

코딩 스쿨 JavaScript