Efectos de conexión de fondo dinámicos populares. El siguiente código está organizado y comentado por el autor sobre el código extraído, que es muy adecuado para el aprendizaje de referencia.
Captura de pantalla del efecto:
Demostración del efecto: https://jc1144096387.github.io/canvas_nest/
Dirección del autor: https://blog.csdn.net/u013556477/article/details/82819785
Código HTML (código de prueba):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Contenido del generador=EditPlus®> <meta name=Contenido del autor=> <meta name=Contenido de palabras clave=> <meta nombre=Descripción contenido=> <título>Efectos de conexión de escena de lienzo</título> <estilo tipo=texto/css>*{ margen: 0px relleno: 0px; } cuerpo{ color de fondo: #f4f4f4; }</style></head><body> <!-- <canvas id=c_n9 ancho=1366 alto=403 estilo=posición: fijo; ; índice z: -1; opacidad: 0.5;></canvas> --> <tipo de script=text/javascript src=test-clear.js opacidad=0 .6></script></body></html>Código javascript:
//Ejecutar la función inmediatamente //! se usa para indicarle al motor JavaScript que se trata de una expresión de función, no de una declaración de función, (),! , +, - y otros operadores pueden lograr este efecto, pero () es el más seguro // Agregar () después de !function(){} llamará a la función inmediatamente // Esto puede simular un alcance privado. De esta manera, el html ¡El archivo no causará conflictos de variables al hacer referencia a varios archivos js! function() { // Elemento de lienzo relacionado // Crea un elemento de lienzo y establece la identificación del elemento de lienzo var canvas = document.createElement(canvas), context = canvas .getContext (2d), atributo = getAttr(); //Establece los atributos relacionados del lienzo creado canvas.id = c_n + attr.length; canvas.style.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //Agrega el elemento lienzo al elemento del cuerpo document.getElementsByTagName(body)[0].appendChild(canvas); //Esta función establece el atributo de ancho y el atributo de alto del elemento de lienzo getWindowWH(); //El evento onresize ocurrirá cuando se cambie el tamaño de la ventana o el marco //Aquí es cuando cambia el tamaño de la ventana, el ancho y el alto de la ventana se vuelven a adquirir y establece el ancho y el alto del elemento del lienzo window.onresize = getWindowWH //Esta función obtendrá el elemento de secuencia de comandos que hace referencia a este archivo. // Debido a que la función getScript se ejecuta una vez durante la asignación en este archivo, cuando el archivo html hace referencia a este archivo, el navegador no ha interpretado la etiqueta de script después de este archivo. //Entonces, en la matriz de script obtenida, el elemento de script que hace referencia a este artículo está al final de la matriz //El propósito de esta función es permitir a los desarrolladores modificar directamente los atributos del elemento de script que introduce el archivo en HTML para modifique algunas propiedades del lienzo, el índice z del lienzo, la transparencia y el número de cuadrados pequeños, el color // Coopere con el código anterior para agregar el elemento lienzo al elemento del cuerpo cuando el desarrollador quiera usarlo. este efecto especial como fondo, solo necesita agregar el elemento script al archivo html y simplemente citar esta función de archivo getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v es el último elemento del script, que se refiere al elemento del script de este documento return { length: len, z: script. getAttribute (zIndex) || -1, opacidad: script.getAttribute(opacidad) || 0,5, color: script.getAttribute(color) || script.getAttribute(count) || 99 } } //Obtiene el ancho y el alto de la ventana y establece el ancho y el alto del elemento del lienzo function getWindowWH() { W = canvas.width = window.innerWidth || | documento.cuerpo .clientWidth, H = lienzo.altura = ventana.alturainterior || documento.documentElement.clientHeight || //Generar cuadrados pequeños en posiciones aleatorias var random = Math.random, squares = []; //Almacenar cuadrados pequeños//Colocar cuadrados pequeños en la matriz squares[] for (let p = 0; p < attr.count; p++ ) { var square_x = random() * W, //abscisa square_y = random() * H, //ordenada square_xa = 2 * random() - 1, //desplazamiento del eje x-1,1 square_ya = 2 * aleatorio () - 1; //Desplazamiento del eje Y squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } //Generar un pequeño cuadrado de mouse var mouse = { x: null, y: null, max: 20000 }; //Obtener las coordenadas del mouse window.onmousemove = function(i) { //i es W3C DOM, window.event Para IE DOM, para lograr compatibilidad con IE // Sin embargo, parece que IE actualmente es compatible con W3C DOM. También puedo lograr efectos de interacción con el mouse comentando la siguiente línea de código. 7/8/9 no es compatible. Sí, no lo he probado. //Por supuesto que es correcto agregar i = i || mouse.x = i.clientX; ; } // Después de que el mouse salga de la ventana, retire el mouse Small square window.onmouseout = function() { mouse.x = null; mouse.y = null } //Dibuja un cuadrado pequeño, el cuadrado pequeño se mueve (movimiento inverso al tocar el límite), el cuadrado pequeño está limitado por la animación var del mouse = ventana .requestAnimationFrame || ventana .webkitRequestAnimationFrame || ventana.mozRequestAnimationFrame || ventana.oRequestAnimationFrame || ventana.msRequestAnimationFrame || 45) }; // El requestAnimationFrame admitido por cada navegador es diferente y es compatible con cada función del navegador draw() { // Borrar el lienzo context.clearRect(0, 0, W, H); ].concat (cuadrados); // Conecta (fusiona) la matriz cuadrada pequeña del mouse y otras matrices cuadradas pequeñas var x, v, A, B, z, y // tabla de atributos cuadrados: x, y, xa, ya, máximo squares.forEach(function(i) { //Realizar el movimiento direccional de los cuadrados pequeños ix += i.xa; iy += i.ya; //Controlar la dirección del movimiento de los cuadrados pequeños//Cuando el cuadrado pequeño llega a la ventana límite, muévase en la dirección opuesta i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); i.ya = i.ya * (iy > H || iy < 0 ? -); 1: 1); // Los dos primeros parámetros de fillRect son las coordenadas x, y de la esquina superior izquierda del rectángulo, y los dos últimos son el ancho y el alto respectivamente // Dibuja un cuadrado pequeño context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); //Recorre todos los elementos en w for (let n = 0; n < w.length; n++) { x = w[n] //Si x e i no son la misma instancia de objeto y el Las coordenadas xy de x existen si (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //La diferencia entre las coordenadas x de i y x y_diff = iy - xy; //La diferencia entre las coordenadas y de i y x distancia = x_diff * x_diff + y_diff * y_diff; //Hipotenusa al cuadrado si (distancia < x.max) { // Haz que el cuadrado pequeño i esté limitado por el cuadrado pequeño del mouse, es decir, si la distancia entre el cuadrado pequeño i y el cuadrado pequeño del mouse es demasiado grande, el cuadrado pequeño i estará limitado por el cuadrado pequeño del mouse, //lo que resulta en múltiples cuadrados pequeños con el mouse como centro, mouse.max /2 es el radio para hacer un círculo if (x === mouse && distancia > x.max / 2) { ix = ix - 0,03 * diferencia_x; iy = iy - 0,03 * diferencia_y } A = (x.max - distancia) / x.max; context.beginPath(); // Establece que el grosor de la línea del pincel esté relacionado con la distancia entre los dos cuadrados pequeños, entre 0 y 0,5. cuanto más delgada es la línea, alcanza el máximo La línea desaparece cuando se dibuja la línea context.lineWidth = A / 2 // Establece el color de la línea del pincel en sc, que es el color del lienzo, y la transparencia en (A+0.2) , es decir, cuanto más lejos estén los dos cuadrados pequeños, más clara será la línea context.strokeStyle = rgba ( +. attr.color + , + (A + 0.2) + ); //Establece el trazo del pincel en el cuadrado pequeño i context.moveTo(ix, iy); //Mueve el trazo del pincel en el cuadrado pequeño x context.lineTo(xx); , xy); //Completa el dibujo de la línea, es decir, dibuja la línea que conecta los pequeños cuadrados context.stroke(); //Eliminar el cuadrado pequeño i de la matriz w //Evitar que dos cuadrados pequeños se conecten repetidamente w.splice(w.indexOf(i), 1 }); //window.requestAnimationFrame es similar a setTimeout, formando una llamada recursiva; , //Sin embargo, window.requestAnimationFrame utiliza el intervalo de tiempo del sistema para mantener la mejor eficiencia de dibujo y proporciona una mejor optimización para que la animación sea más fluida//Después de la optimización del navegador, la animación es más fluida; // Cuando la ventana no está activada, la animación se detendrá para ahorrar recursos informáticos; animación(draw); // Aquí, después de esperar 0,1 segundos, ejecute draw() una vez. El efecto de animación real es setTimeout( implementado por la ventana. .requestAnimationFrame función() { dibujar() }, 100)} ();Dirección del código fuente: https://github.com/jc1144096387/canvas_nest
ResumirLo anterior es el código para analizar el lienzo html5 para lograr efectos dinámicos de conexión del mouse en segundo plano introducidos por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!