Recientemente, vi una animación de cuadrícula de partículas muy deslumbrante, e hice una, y era bastante buena como fondo. CSDN no puede subir más de 2 m imágenes, así que simplemente corte una imagen estática:
Comencemos a decir cómo lograr este efecto:
En primer lugar, por supuesto, agregue un lienzo:
<Canvas ID = Canvas> </Canvas>
El siguiente estilo:
<Syle> #canvas {Posición:El papel del índice z: -1 del lienzo anterior es que se puede colocar bajo el fondo de algunos elementos.
Para garantizar que el lienzo se pueda llenar con todo el navegador, es necesario establecer la amplia altura del lienzo al mismo que el navegador:
Función getSize () {w = Canvas.width = Window.innerWidth;Los anteriores W y H representan el ancho del navegador.
Obtenga el ancho del navegador, y el siguiente paso es dibujar partículas.
Var opt = {Particleameunt: 50, // El número de partículas de forma predeterminada: 1, // La velocidad de velocidad de movimiento de partículas Variantspeed: 1, // La variable de la velocidad de movimiento de partículas: RGB (32,245,245), // El color de las partículas Linecolor: RGB (32,245,245), // El color de la conexión de la cuadrícula DeFaultradius: 2, // El radio de partículas Variantius: 2, // La variable de la mentalidad del radio de partículas: 200 // la distancia mínima entre las partículas};Las variables de velocidad y las variables de radio anteriores son para garantizar que el tamaño y la velocidad de las partículas no sean exactamente lo mismo.
Luego creamos una clase para inicializar las partículas.
Función parcical () {this.x = Math.random ()*W; .speed = optionSpeed + opt.variantspeed*Math.random (); Color = opt.Particlecolor; ), // Velocidad de partículas en el eje x y: this.speed * math.sin (this.DirectionAngle) // La velocidad de las partículas en el eje y -xis} this.update = function () {// Función de actualización de partículas this.border (); momento este.y += this.vector.y; (this.x> = w || this.x <= 0) {// El número negativo this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Si llega a los bordes superiores e inferiores, haga la velocidad del eje y -eje en el número negativo original este .vector.y *= -1;} if (this.x> w) {// lo siguiente es el funcionamiento de cambiar la ventana del navegador en el tamaño del tamaño, y algunas partículas después del tamaño de la ventana se ocultarán. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// Dibuja la función de las partículas CTX. beginPath ();1. La velocidad y el ángulo inicial de cada partícula se generan aleatoriamente, y el color de las partículas está determinado por las opciones de configuración relevantes.
2. Este vector se usa para almacenar la dirección de movimiento de las partículas: si este.vector.x es 1, las partículas se mueven hacia la derecha; Del mismo modo, si este.vector.y es negativo, las partículas se mueven hacia arriba, y si es positiva, las partículas se mueven hacia abajo.
This.update se usa para actualizar las coordenadas de la siguiente posición de cada partícula. Primero, la detección de borde se realiza;
3. El zoom de la ventana puede hacer que las partículas excedan el límite, de modo que la función de detección de borde no se puede capturar, por lo que se necesitan una serie de declaraciones IF para detectar esta situación y restablecer la posición de las partículas al límite de lienzo actual.
4. Dibuja estos puntos en el lienzo en el último paso.
Se han escrito las partículas de las partículas, y lo dibujará a continuación:
Function init () {getSize ();La inicialización anterior de OPT.ParticicalMount tiene un objeto de partícula, que inicializa el objeto pero no se dibuja a continuación.
Function loop () {ctx.clearrect (0,0, w, h); dibujo ();} Window.RequestanimationFrame (bucle);}Cada vez que se ejecuta la función Loop (), se eliminará el contenido en el lienzo, y luego la coordenada de partículas se vuelve a calcular a través de la función Update () del objeto de partículas, y las partículas se dibujan a través de la función Draw () del objeto de partícula. El siguiente es el efecto en este momento:
Sin embargo, después de que cambia el tamaño de la ventana del navegador, algunas partículas desaparecerán en este momento, debe agregar un evento para monitorear si el tamaño del navegador cambia:
Window.adDeventListener (RESEZE, FUNTY () {winResize ()}, falso);Luego, debe escribir la función WinResize (). Y el rendimiento más consumido. Tamaño del navegador.
Var Particle = [], W, H; altura, hay una introducción a}, demora)} en la parte superior del artículo
De esta manera, se completa toda la animación de partículas, y luego podemos dibujar una línea entre las partículas. lo dibujará entre ellos.
Entonces, cómo calcular la distancia entre las dos partículas, puede pensar en la primera lección de las matemáticas de la escuela secundaria, el teorema de Pyrothebroken, el cuadrado y el cuadrado y el cuadrado y el triángulo derecho del triángulo derecho son igual al cuadrado de el tercer cambio.
Ahora conocemos las coordenadas del eje x y el eje y de cada partícula, luego podemos calcular la distancia entre los dos puntos, escribir una función y pasar los dos puntos, de la siguiente manera:
Función getDistance (Point1, Point2) {return Math.Sqrt (Math.Pow (Point1.X -Point2.x, 2) + Math.Pow (Point1.y -Point2.y, 2));}Ahora podemos calcular la distancia entre dos puntos, por lo que calculamos la distancia entre todas las partículas y todas las demás partículas para determinar si necesitan conectarse. Un poco es feo, por lo que podemos determinar la transparencia de la conexión de acuerdo con la distancia entre las dos partículas. No se mostrará una cierta distancia.
Funcion LinePoint (Point, Hub) {para (Let i = 0; i <Hub.Length; i ++) {Let Distance = GetDistance (Point, Hub [i]); (if (opacidad> 0) {ctx.linewidth = 0.5; ctx.strokestyle = rgba (+línea [0]+,+línea [1]+,+línea [2]+,+opacidad+); ctx.beginpath () ; }}}}}}}}Los dos parámetros transmitidos anteriormente son la matriz de un punto y todo el punto, dejando que la opacidad = 1 -distance/opcionistance; es negativo, y los siguientes juicios se filtran.
var line = option.linecolor.match (// d+/g);
Finalmente, la distancia de cálculo de la distancia se distribuye continuamente en la función bucle ().
Function loop () {ctx.clearrect (0,0, w, h); dibujo ();} para (let i = 0; i <partícula.length; i ++) {// agregue este punto de línea cíclico (partícula [i], partícula)} ventana.requestanimationFrame (bucle);}Cabe señalar que si agrega demasiado punto a/o demasiada distancia de conexión (la distancia de conexión creará demasiadas líneas), la animación no se llevará a cabo. Cuando el puerto de vista se estrecha, es mejor reducir la velocidad de movimiento de las partículas: cuanto más pequeño sea el tamaño de las partículas y la velocidad de movimiento en el espacio estrecho parece más rápida.
Muestre todo el código:
<! 0; Canvas); ), // El color de las partículas Linecolor: RGB (32,245,245), // El color de la cuadrícula que conecta el color defaultradius: 2, // Radio de partículas Variantius: 2, // La mentalidad variable del radio de partículas: 200 /200 /200 / / El cable conectado entre la distancia mínima de las partículas}; ; () {GetSize (getSize); i <partícula.length; LinePoint (partícula [i], partícula)} window.requestanimationFrame (bucle);} función linePoint (punto, hub) {for (let i = 0; i <hub.length; i ++) Let Dispance = getDistance (punto, HUB [i]); +línea [2]+,+opacidad+); .ClosePath (); -Point2.y, 2));} Función GetSize () {W = Canvas.Width = Window.innerWidth; X -EXIS COORDINACIÓN DE LAS PARTICULAS THIS.Y = MATH.RANDOM ()*H; La velocidad de movimiento de las partículas es. .FaulTradrad IUS+Math. partículas en el eje x y: this.speed* Math. partículas this.border (); En el momento siguiente este.y += this.vector.y; ¿Todos alcanzan el borde si (this.x> = w || this.x <= 0) {// Si alcanza los límites izquierdo y derecho, haga que la velocidad del eje x se convierta en el número negativo original esto .vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Si alcanza los límites superior e inferior, la velocidad del eje y se convertirá en el Número negativo original this.vector.y *= -1; , para que pueda mostrar esto.x = w;} if (this.y> h) {this.y = h;} if (this.x <0) {this.x = 0;} if (this.y <0) {this.y = 0;} this.draw = function () {{{// La función de dibujar partículas ctx.beginpath (); 0, Math.pi * 2);Lo anterior es todo el contenido de este artículo.