HTML5 Canvas로 만드는 신기한 파티클 효과 ✨

작성: 2024년 06월 16일읽기: 약 3분

웹 개발을 배우는 여러분, 화면을 더욱 생동감 있게 만들어 줄 멋진 효과를 소개합니다. 바로 HTML5의 Canvas를 이용한 파티클 효과인데요, 복잡해 보일 수 있지만, 조금씩 따라오시면 분명 멋진 결과물을 만들 수 있을 거예요!

파티클이란?

간단히 말해, 파티클은 작은 입자들을 의미해요. 화면 상에서 무수히 많은 작은 점들이 움직이며 멋진 시각적 효과를 만들어내죠. 이런 효과는 웹사이트의 배경이나 인터랙티브한 요소로 활용할 수 있어요.

시작하기 전에

HTML5의 Canvas와 기본적인 JavaScript 지식이 필요합니다. Canvas는 웹 페이지 내에 그래픽을 그릴 수 있는 HTML 요소입니다. JavaScript를 통해 이 Canvas를 조작할 거예요.

기본 설정

먼저, HTML 파일에 Canvas 요소를 추가해야 합니다. 그리고 이 Canvas를 조작할 JavaScript 파일도 준비해둡시다.

<!DOCTYPE html>
<html>
<head>
    <title>신기한 파티클 효과</title>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    <script src="particle.js"></script>
</body>
</html>

JavaScript로 Canvas 설정하기

JavaScript 파일에서는 Canvas의 크기를 설정하고, 파티클을 생성 및 조작하는 코드를 작성할 거예요.

// Canvas 설정
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

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

// 파티클 생성
function Particle() {
    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;
}

// 파티클 그리기
Particle.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    ctx.fillStyle = 'white';
    ctx.fill();
}

// 파티클 업데이트
Particle.prototype.update = function() {
    this.x += this.speedX;
    this.y += this.speedY;
}

// 파티클 배열 생성 및 애니메이션
let particles = [];

for (let i = 0; i < 100; i++) {
    particles.push(new Particle());
}

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

animate();

이 코드는 화면에 100개의 작은 입자를 생성하고, 이들이 무작위 방향으로 움직이게 만듭니다. 입자들은 화면의 크기를 벗어나면 다시 반대편에서 나타나도록 설정할 수 있어요. 이를 통해 연속적인 파티클 효과를 만들 수 있습니다.

마무리

여기까지 따라오셨다면, 기본적인 파티클 효과를 구현할 수 있게 되셨을 거예요. 이제 여러분의 창의력을 발휘해 더 다양한 효과를 추가해 보세요. 예를 들어, 파티클의 색상을 변경하거나, 마우스 움직임에 반응하도록 만들 수도 있습니다. 웹 개발은 무한한 가능성을 제공합니다. 여러분의 웹사이트를 더욱 돋보이게 만들어 줄 멋진 파티클 효과를 만들어 보세요!