Arrière-plan de points animés

3,302 Vijay

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 May 2024

Formulaire de connexion simple

27 September 2025

Achetez des TikTok Coins : rechargez et envoyez des cadeaux

19 March 2025

Lampes d'étude

HTML

CSS

const canvas = document.getElementById('canvas');
        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;
                
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

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

init();
        animate();

window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });