Exemplo de implementação de fundo de animação de partículas de tela

Sem efeito de conexão:

O efeito da conexão:

Conseguir tal efeito é realmente muito simples e pode ser dividido nas seguintes etapas:

Primeiro, você precisa criar uma tag canvas no elemento pai que precisa exibir o fundo da partícula e especificar width e height . Quando geramos coordenadas de ponto aleatório, precisamos usar width e height como referência. width e height são iguais à largura e altura do elemento pai.

 // Se o elemento pai for bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Insira a tag canvas em ele .appendChild (tela);

Gere aleatoriamente uma certa quantidade de informações de coordenadas de ponto com width e height como referência, incluindo x , y , rateX (a taxa de movimento do ponto no eixo X), rateY (a taxa de movimento do ponto no eixo Y) , rateX e rateY determinam o movimento da trajetória do ponto.

 const points = [];// Gere aleatoriamente as coordenadas dos pontos, você precisa especificar o valor máximo do raio function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // A coordenada x da partícula y = Math.ceil(Math.random() * this.height), // A coordenada y da partícula r = +(Math.random() * this.radius).toFixed(4) , // O raio da partícula rateX = +(Math.random() * 2 - 1).toFixed(4), // A taxa de movimento da partícula na direção x rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // A taxa de movimento da partícula na direção y return { x, y, r, rateX, rateY };}// Gera aleatoriamente as informações de coordenadas de 100 pontos para (seja i = 0; eu < 100; i++) { pontos.push(this.getPoint());}

Desenhe a matriz de pontos gerada na tela

 function drawPoints() { pontos.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //Move as coordenadas do ponto de acordo com rateX e rateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate } else { // Se o movimento da partícula exceder o limite, mova o partícula Remover e regenerar um novo ponto points.splice(i, 1); points.push(getPoint(radius));}

Percorra a matriz de pontos e compare as coordenadas dos pontos. Se a distância entre os dois pontos for menor que um determinado valor, desenhe uma linha reta entre os dois pontos. lineWidth muda com a distância entre os dois pontos. , mais fina será a linha.

 // Calcula a distância entre dois pontos function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2); disX + disY * disY);}function drawLines() { const len ​​​​= points.length;/Julgue as coordenadas do centro em pares for(let i = 0; i <; len; i++) { for(seja j = len - 1; j >= 0; j--) { const x1 = pontos[i].x, y1 = pontos[i].y, x2 = pontos[j]. x, y2 = points[j].y, disPoint = dis(x1, y1, x2, y2); // Se a distância entre dois pontos for menor que 150, desenhe uma linha if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); versa ctx.lineWidth = 1 - disPoint / distância ctx.stroke();

Use requestAnimationFrame para chamar o método draw em um loop (o método draw inclui desenhar pontos e linhas) e, ao mesmo tempo, alterar a posição do ponto de acordo com rateX e rateY durante draw .

 // Chame a função draw para iniciar a animação (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // Se você não precisa desenhar linhas, basta cancelar a seguinte linha de código.drawLines(); window.requestAnimationFrame(draw);}());

Para o código completo, consulte: https://github.com/PengJiyuan/particle-bg

Meu Github: https://github.com/PengJiyuan

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.