Crie uma tag canvas em seu arquivo HTML
<canvas id="particles"></canvas>
Agora basta criar um arquivo JavaScript e linka-lo ao seu HTML.
Vamos começar
Comece criando duas variáveis, canvas e context
let canvas = document.getElementById('particles'); let ctx = canvas.getContext('2d');
Logo abaixo criamos duas variáveis
particles – Referente ao número de partículas que será renderizado.
particlesArray – Vetor que conterá os dados da partícula: posição nos eixos X e Y, raio e velocidade de movimento nos eixos X e Y.
let particles = 150; let particlesArray = [];
Precisamos também informar a largura e altura do nosso canvas, no meu caso será o mesmo tamanho da tela, mas fica a seu critério colocar o tamanho que desejar em px
canvas.height = window.innerHeight; canvas.width = window.innerWidth;
Podemos também criar um evento pro caso de o usuário variar o tamanho da tela.
window.onresize = () => { canvas.height = window.innerHeight; canvas.width = window.innerWidth; }
O próximo passo será implementar uma função que atuará como um construtor e terá os atributos:
positionX – receberá um número aleatório que será multiplicado pela largura do canvas e será responsável pela posição inicial no eixo X da partícula
positionY – receberá um número aleatório que será multiplicado pela altura do canvas e será responsável pela posição inicial no eixo Y da partícula
speedX – receberá um número aleatório que será multiplicado por um número qualquer dependendo do quão rápido você deseja que as partículas se movam no eixo X, se speedX for igual a um número negativo, as partículas se moverão para a esquerda se for positivo para a direita.
speedY – terá a mesma finalidade do speedX só que neste caso será o eixo X, se speedY for igual a um número negativo, as partículas se moverão para cima se for positivo para baixo
*Sendo assim, tanto no speedX quanto no speedY você poderá fazer um cálculo para fazer com que as partículas se movam na direção que você desejar.
*Se speedX e speedY forem igual a 0 a partícula ficará parada
size – receberá um número aleatório que será responsável pelo raio da partícula em px, no exemplo, o cálculo retorna um número de 1 a 3, o valor de size precisa ser maior que 0.
function Particle() { this.positionX = Math.round(Math.random() * canvas.width); this.positionY = Math.round(Math.random() * canvas.height); this.speedX = Math.round(Math.random() * 5 - 1); this.speedY = Math.round(Math.random() * 4); this.size = Math.round(Math.random() * 2 + 1); }
Com isso pronto faremos um for para criar o número de partículas que você informou lá na variável particles.
for (let i = 0; i < particles; i++) { particlesArray.push(new Particle); }
Desenhando Partículas
Vamos agora abrir uma função que se chamará drawParticle
function drawParticle() {
A primeira coisa a fazer depois de abrir a função é gerar um retângulo que ficará de background:
// Cor de Preenchimento ctx.fillStyle = '#302b62' // Posição Inicial X, Posição Inicial Y, Largura, Altura do retângulo ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fill();
E finalmente podemos partir para desenhar as nossas partículas
// Cor de Preenchimento ctx.fillStyle = 'rgb(249, 251, 250)'; ctx.beginPath(); // ForEach no particlesArray para desenhar as partículas particlesArray.forEach(particle => { /* Posição Inicial X, Posição Inicial Y, Raio, Angulo Inicial, * Angulo Final, Sentido de Desenho true = Sentido Anti-Horário*/ ctx.arc(particle.positionX, particle.positionY, particle.size, 0, Math.PI * 2, true); /* Faz a soma da posição inicial com a velocidade * PosiçãoX = 228; VelocidadeX = 2; PosiçãoY = 303; VelocidadeY = 3 * A particula está na posição 228px ela será movida 2px para a * direita e ao mesmo tempo será movida para baixo 3px*/ particle.positionX += particle.speedX; particle.positionY += particle.speedY; if (particle.positionX > canvas.width) { particle.positionX = 0; } if (particle.positionY > canvas.height) { particle.positionY = 0; } ctx.closePath(); }); ctx.fill();
Agora vamos chamar uma função requestAnimationFrame para deixar a nossa função drawParticle em loop
requestAnimationFrame(drawParticle)
Depois é só fechar a função drawParticle e fazer a chamada da mesma para dar inicio a criação de partículas
} drawParticle();
Veja como funciona
Visite: https://codepen.io/lucaslacroix/pen/QxeQdj