▶ JavaScript Graphics

JavaScript Graphics

JavaScript Graphics: 웹에서의 그래픽 처리

JavaScript Graphics는 웹 페이지에서 다양한 그래픽을 생성하고 조작하는 데 사용되는 기술입니다. HTML5의 <canvas> 요소, SVG(Scalable Vector Graphics), WebGL(Web Graphics Library) 등 다양한 방법을 통해 JavaScript로 그래픽을 처리할 수 있습니다. 이 가이드는 JavaScript를 사용하여 그래픽을 생성하고 조작하는 방법을 소개합니다.

1. HTML5 Canvas

1.1. Canvas란?

Canvas는 HTML5에서 도입된 요소로, JavaScript를 사용하여 비트맵 그래픽을 그릴 수 있는 공간을 제공합니다. <canvas> 요소를 사용하여 그림, 애니메이션, 게임 등을 구현할 수 있습니다.

1.2. 기본 사용법

HTML 문서에 <canvas> 요소를 추가하고, JavaScript로 그래픽을 그립니다.

1.2.1. HTML 코드

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

1.2.2. JavaScript 코드 (script.js)

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

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

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

2. SVG (Scalable Vector Graphics)

2.1. SVG란?

SVG는 XML 기반의 벡터 그래픽 형식으로, 크기를 조정해도 품질이 손상되지 않습니다. SVG는 웹 페이지에 직접 삽입할 수 있으며, CSS 및 JavaScript로 스타일을 적용하고 조작할 수 있습니다.

2.2. SVG 사용법

2.2.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Example</title>
    <style>
        .circle {
            fill: green; /* 원 색상 */
        }
    </style>
</head>
<body>
    <svg width="400" height="200">
        <circle class="circle" cx="100" cy="100" r="80" />
        <rect x="200" y="40" width="150" height="100" fill="orange" />
    </svg>
    <script src="script.js"></script>
</body>
</html>

2.2.2. JavaScript 코드 (script.js)

// SVG 요소에 클릭 이벤트 추가
document.querySelector('.circle').addEventListener('click', function() {
    alert('Circle clicked!'); // 원 클릭 시 알림 표시
});

3. WebGL

3.1. WebGL이란?

WebGL은 웹에서 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. OpenGL ES를 기반으로 하며, GPU를 사용하여 고성능의 그래픽을 생성합니다.

3.2. WebGL 사용법

WebGL은 복잡한 API를 가지고 있지만, 기본적인 예제를 통해 2D 그래픽을 렌더링하는 방법을 살펴보겠습니다.

3.2.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Example</title>
</head>
<body>
    <canvas id="glCanvas" width="640" height="480"></canvas>
    <script src="script.js"></script>
</body>
</html>

3.2.2. JavaScript 코드 (script.js)

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl'); // WebGL 컨텍스트 가져오기

// WebGL이 지원되는지 확인
if (!gl) {
    alert('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
}

// 화면을 빨간색으로 초기화
gl.clearColor(1.0, 0.0, 0.0, 1.0); // 빨간색으로 설정
gl.clear(gl.COLOR_BUFFER_BIT); // 색상 버퍼 지우기

4. 전체 예제: 다양한 그래픽 조작

아래는 jQuery를 사용하여 HTML 요소와 그래픽을 함께 조작하는 예제입니다.

4.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphics Example</title>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>JavaScript Graphics Example</h1>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <button id="drawButton">Draw Shapes</button>

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

            $('#drawButton').click(function() {
                // 사각형 그리기
                ctx.fillStyle = 'blue';
                ctx.fillRect(50, 20, 150, 100);

                // 원 그리기
                ctx.beginPath();
                ctx.arc(300, 100, 50, 0, Math.PI * 2);
                ctx.fillStyle = 'red';
                ctx.fill();
            });
        });
    </script>
</body>
</html>

위의 코드는 버튼 클릭 시 <canvas>에 사각형과 원을 그리는 예제입니다.

5. 요약

JavaScript Graphics는 웹 페이지에서 다양한 그래픽을 생성하고 조작하는 데 필요한 기술입니다. HTML5의 <canvas>, SVG, WebGL을 통해 JavaScript로 그래픽을 처리할 수 있습니다.

Canvas: 비트맵 그래픽을 그릴 수 있는 HTML5 요소.
SVG: XML 기반의 벡터 그래픽 형식.
WebGL: GPU를 사용하여 고성능 2D 및 3D 그래픽을 렌더링하는 JavaScript API.

JavaScript를 활용하여 다양한 그래픽을 동적으로 생성하고 조작할 수 있습니다.

코딩 스쿨 JavaScript