Animación de partículas de lienzo con interacción del ratón

474 azerty

Abrir en el editor Publica tu código

Animación de partículas de lienzo con interacción del ratón

Recomendado

30 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

12 June 2025

Un código de Mete

27 December 2025

Sobre de carta de amor animado en HTML con GSAP

HTML

<!DOCTYPE html>
<html>
<body style="margin:0; overflow:hidden; background:#000;">
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];

class Particle {
    constructor(x, y) {
        this.x = x; this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    update() {
        this.x += this.speedX; this.y += this.speedY;
        if (this.size > 0.2) this.size -= 0.1;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
    }
}

function handle() {
    for (let i = 0; i < particles.length; i++) {
        particles[i].update(); particles[i].draw();
        if (particles[i].size <= 0.2) { particles.splice(i, 1); i--; }
    }
}

window.addEventListener('mousemove', (e) => {
    for (let i = 0; i < 5; i++) particles.push(new Particle(e.x, e.y));
});

function animate() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    handle(); requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

CSS