Recentemente, vi uma animação de grade de partículas muito deslumbrante, e fiz uma, e foi muito bom como o fundo. O CSDN não pode fazer upload de mais de 2 milhões de imagens, então basta cortar uma imagem estática:
Vamos começar a dizer como alcançar esse efeito:
Primeiro de tudo, é claro, adicione uma tela:
<canvas id = canvas> </lvas>
O seguinte estilo:
<Estilo> #Convas {Posição: Absoluto;O papel do índice z: -1 da tela acima é que ela pode ser colocada no fundo de alguns elementos.
Para garantir que a tela possa ser preenchida com todo o navegador, é necessário definir a ampla altura da tela para o mesmo que o navegador:
Function getsize () {w = canvas.width = window.innerwidth;Os acima W e H representam a largura do navegador.
Obtenha a largura do navegador e o próximo passo é desenhar partículas.
Var opt = {partleamount: 50, // O número de partículas defaultpeed: 1, // a variante de velocidade do movimento das partículas: 1, // a variável da velocidade do movimento da partícula: RGB (32.245.245), // a cor das partículas LineColor: RGB (32.245.245), // A cor da conexão da grade Defaultradius: 2, // O raio de partícula variantradius: 2, // a variável da mente do raio de partículas: 200 // a distância mínima entre as partículas};As variáveis de velocidade e as variáveis de raio acima são para garantir que o tamanho e a velocidade das partículas não sejam exatamente iguais.
Em seguida, criamos uma classe para inicializar partículas.
Function partical () {this.x = math.random ()*w; .Speed = OpçõesPeed + Opt.VariantsPeed*Math.random (); Color = opt.partticlecolor; ), // velocidade de partícula no eixo x: this.speed * math.sin (this.directionAnge) // a velocidade das partículas no eixo y} this.update = function () {// Função de atualização de partículas. momento isso.y += this.vector.y; (this.x> = w || this.x <= 0) {// o número negativo this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Se atingir as fronteiras superior e inferior, faça a velocidade do eixo y no número negativo original deste .Vector.y *= -1;} if (this.x> w) {// o seguinte é a operação de alterar a janela do navegador no tamanho do tamanho, e algumas partículas após o tamanho da janela serão ocultas. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// desenhe a função das partículas ctx. BeginPath ();1. A velocidade e o ângulo inicial de cada partícula são gerados aleatoriamente e a cor das partículas é determinada pelas opções de configuração relevantes.
2. Este.Vortor é usado para armazenar a direção do movimento das partículas: se este.Vector.x é 1, as partículas se movem para a direita; Da mesma forma, se este.Vector.y é negativo, as partículas se movem para cima e, se for positivo, as partículas se movem para baixo.
Este.Update é usado para atualizar as coordenadas da próxima posição de cada partícula. Primeiro, a detecção da borda é realizada;
3. O zoom da janela pode fazer com que as partículas excedam o limite, para que a função de detecção de borda não possa ser capturada; portanto, uma série de declarações se forem necessárias para detectar essa situação e redefinir a posição das partículas para o limite atual da tela.
4. Desenhe esses pontos na tela na última etapa.
As partículas das partículas foram escritas, e ele o atrairá abaixo:
Função init () {getSize ();A inicialização acima do opt.Particalamount possui um objeto de partícula, que inicializa o objeto, mas não é desenhado.
Função loop () {ctx.clearrect (0,0, w, h); draw ();} window.requestanimationframe (loop);}Cada vez que a função loop () é executada, o conteúdo na tela será removido e, em seguida, a coordenada de partículas é re -calculada através da função atualizada () do objeto de partículas, e as partículas são desenhadas através da função de desenho () do objeto de partícula. O seguinte é o efeito neste momento:
No entanto, após o tamanho da janela do navegador mudar, algumas partículas desaparecerão.
Window.addeventListener (redimensionar, function () {winResize ()}, false);Em seguida, você precisa escrever a função WinResize () E mais desempenho consumido. O tamanho do navegador.
VAR Particular = [], W, H; altura, há uma introdução a}, atraso)} no topo do artigo
Dessa maneira, toda a animação de partículas é concluída e, em seguida, podemos desenhar uma linha entre as partículas. irá desenhá -lo entre eles.
Então, como calcular a distância entre as duas partículas, você pode pensar na primeira lição da matemática do ensino médio, o teorema de Pirothebroken, o quadrado e o quadrado e o quadrado e o triângulo direito do triângulo direito são iguais ao quadrado de A terceira mudança.
Agora sabemos as coordenadas do eixo x e Y de cada partícula, então podemos calcular a distância entre os dois pontos, escrever uma função e passar os dois pontos, como segue:
Função getDistance (ponto1, ponto2) {return math.sqrt (math.pow (ponto1.x -point2.x, 2) + math.pow (ponto1.y -point2.y, 2));}Agora, podemos calcular a distância entre dois pontos, então calculamos a distância entre todas as partículas e todas as outras partículas para determinar se elas precisam conectar. Um pouco é feio, para que possamos determinar a transparência da conexão de acordo com a distância entre as duas partículas. Uma certa distância não será exibida.
Função LinePoint (Point, Hub) {para (vamos I = 0; i <hub.length; (if (opacidade> 0) {ctx.linewidth = 0.5; ctx.strokestyle = rgba (+linha [0]+,+linha [1]+,+linha [2]+,+opacidade+); ctx.BeginPath () ; }}}}}}}}Os dois parâmetros transmitidos acima são a matriz de um ponto e o ponto inteiro, deixando a opacidade = 1 -Distância/opção; é negativo e os julgamentos a seguir são filtrados.
var linha = option.linecolor.match (// d+/g);
Finalmente, a distância do cálculo da distância circula continuamente na função Loop (). Adicione o código ao loop () da seguinte forma:
Função loop () {ctx.clearrect (0,0, w, h); draw ();} para (vamos i = 0; i <partícula.length; i ++) {// Adicione este ponto de linha cíclico (partícula [i], partícula)} window.requestanimationframe (loop);}Deve -se ressaltar que, se você adicionar muito ponto a/ou muita distância de conexão (a distância da conexão criará muitas linhas), a animação não será transportada. Quando a porta da vista se estreita, é melhor reduzir a velocidade de movimento das partículas: quanto menor o tamanho das partículas e a velocidade de movimento no espaço estreito parece mais rápido.
Mostre o código inteiro:
<! 0; Tela); ), // A cor das partículas Linecolor: RGB (32.245.245), // A cor da grade que conecta a cor Detaultradius: 2, // Radio de partículas Variantradius: 2, // A mente variável do raio de partículas: 200 /200 / / O fio conectado entre a distância mínima das partículas}; INICENTE (); () {Getsize (Getsize); i <partícula.Length; Linha de linha (partícula [i], partícula)} window.requestanimationframe (loop);} função linepoint (ponto, hub) {for (let i = 0; i <hub.length; i ++) deixe descartar = getDistance (ponto, ponto, hub [i]); +linha [2]+,+opacidade+); .closePath (); -Point2.y, 2));} função getsize () {w = canvas.width = window.innerwidth; x -eixo coordenado das partículas velocidade de movimento das partículas é.directionangle = math.floor (math.random ()*360); .Defaultradrad ius+matemática. partículas no eixo x: this.speed* matemática. partículas this.border (); No próximo momento. é todos eles atingem a borda se (this.x> = w || this.x <= 0) {// se você atingir os limites esquerdo e direito, faça a velocidade do eixo x se transformar no número negativo original que este .Vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Se atingir os limites superior e inferior, a velocidade do eixo y se transformará no Número negativo original this.vector.y *= -1; , para que ele possa exibir isso. <0) {this.y = 0;} this.draw = function () {{{// a função de desenhar partículas ctx.beginpath (); 0, Math.pi * 2);O acima é todo o conteúdo deste artigo.