← 목록

HTML5 Canvas로 만드는 신비로운 파티클 효과 ✨

작성: 2025년 05월 21일읽기: 약 3분
GPTLLM

HTML5 Canvas를 사용하여 화면에 신비로운 파티클(particle) 효과를 만들어보세요. 이 간단한 프로젝트를 통해 웹 개발의 재미를 느낄 수 있을 것입니다. 주니어 개발자 여러분, 코드를 따라 하면서 창의적인 웹 경험을 만들어보세요!

시작하기 전에

HTML5 Canvas는 웹 페이지에 그래픽을 그리는 데 사용되는 HTML 요소입니다. JavaScript와 함께 사용하여 동적인 그래픽, 애니메이션 등을 만들 수 있습니다. 오늘은 이 Canvas를 사용하여 화면 가득 퍼지는 파티클 효과를 만들어볼 거예요.

기본 HTML 구조

먼저, HTML 파일을 만들고 기본 구조를 설정해보겠습니다. 아래 코드를 복사하여 사용하세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>신비로운 파티클 효과</title>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    <script src="particle.js"></script>
</body>
</html>

JavaScript로 파티클 생성하기

particle.js 파일을 만들고, 아래 코드를 추가해보세요. 이 코드는 Canvas에 파티클을 생성하고 움직이게 합니다.

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let particlesArray;

class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
    draw() {
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

function init() {
    particlesArray = [];
    for (let i = 0; i < 100; i++) {
        particlesArray.push(new Particle());
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
        particlesArray[i].draw();
    }
    requestAnimationFrame(animate);
}

init();
animate();

이 코드는 Particle 클래스를 만들어 파티클의 위치, 크기, 속도를 정의하고, init 함수에서 이 파티클들을 생성하여 배열에 저장합니다. animate 함수는 이 파티클들을 화면에 그리고, 위치를 업데이트하여 움직이는 효과를 만듭니다.

마무리

이제 HTML 파일을 웹 브라우저에서 열어보세요. 화면에 신비로운 파티클 효과가 나타날 것입니다. 이 효과는 웹사이트의 배경이나 인터랙티브한 요소로 활용할 수 있습니다. 코드를 조금 변경하여 파티클의 색상, 크기, 속도 등을 자유롭게 조정해보세요. 웹 개발의 매력에 빠져보세요!