Efeitos populares de conexão de fundo dinâmico. O código abaixo é organizado e comentado pelo autor no código extraído, o que é muito adequado para aprendizagem de referência.
Captura de tela do efeito:
Demonstração do efeito: https://jc1144096387.github.io/canvas_nest/
Endereço do autor: https://blog.csdn.net/u013556477/article/details/82819785
Código HTML (código de teste):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Autor content=> <meta name=Palavras-chave content=> <meta name=Descrição content=> <title>Efeitos de conexão de cena em tela</title> <style type=text/css>*{ margin: 0px; } corpo{ cor de fundo: #f4f4f4; }</style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: fixo superior: 0px esquerda: 0px; ;índice z: -1; opacidade: 0,5;></canvas> --> <script type=text/javascript src=test-clear.js opacity=0 .6></script></body></html>Código JavaScript:
//Execute a função imediatamente // é usado para informar ao mecanismo JavaScript que esta é uma expressão de função, não uma declaração de função, (),! , +, - e outros operadores podem obter esse efeito, mas () é o mais seguro // Adicionar () depois de !function(){} chamará a função imediatamente // Isso pode simular um escopo privado, desta forma, o html arquivo não causará conflitos de variáveis ao fazer referência a vários arquivos js! function() { //Elemento Canvas relacionado // Crie um elemento canvas e defina o id do elemento canvas var canvas = document.createElement(canvas), context = canvas .getContext (2d), atr = getAttr(); //Definir os atributos relacionados da tela criada canvas.id = c_n + attr.length; canvas.style.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //Adiciona o elemento canvas ao elemento body document.getElementsByTagName(body)[0].appendChild(canvas); //Esta função define o atributo de largura e o atributo de altura do elemento canvas getWindowWH(); //O evento onresize ocorrerá quando a janela ou quadro for redimensionado //Aqui é quando o tamanho da janela muda, a largura e a altura da janela são readquiridos E defina a largura e a altura do elemento canvas window.onresize = getWindowWH; //Esta função obterá o elemento de script que faz referência a este arquivo. //Como a função getScript é executada uma vez durante a atribuição neste arquivo, quando o arquivo html se refere a este arquivo, a tag de script após este arquivo não foi interpretada pelo navegador. //Portanto, no array de script obtido, o elemento de script que faz referência a este artigo está no final do array //O objetivo desta função é permitir que os desenvolvedores modifiquem diretamente os atributos do elemento de script que introduz o arquivo no HTML para modifique algumas propriedades da tela, o índice z da tela, a transparência e o número de pequenos quadrados, a cor // Coopere com o código anterior para adicionar o elemento canvas ao elemento body Quando o desenvolvedor quiser usar. este efeito especial como plano de fundo, ele só precisa adicionar o elemento script ao arquivo html e apenas citar este arquivo function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v é o último elemento de script, que se refere ao elemento de script deste documento return { length: len, z: script. getAttribute (zIndex) || -1, opacidade: script.getAttribute(opacidade) || 0,5, cor: script.getAttribute(cor) || 0,0,0, contagem: script.getAttribute(count) || 99 } } //Obtém a largura e a altura da janela e define a largura e a altura do elemento canvas function getWindowWH() { W = canvas.width = window.innerWidth || document.documentElement.clientWidth | | document.body .clientWidth, H = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } //Gerar pequenos quadrados em posições aleatórias var random = Math.random, squares = []; //Armazenar pequenos quadrados//Colocar pequenos quadrados no array squares[] for (let p = 0; p < attr.count; p++ ) { var square_x = random() * W, //abscissa square_y = random() * H, //ordenada square_xa = 2 * random() - 1, //deslocamento do eixo x-1,1 square_ya = 2 * random () - 1; //Deslocamento do eixo Y squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } //Gerar um pequeno quadrado de mouse var mouse = { x: null, y: null, max: 20000 }; //Obter as coordenadas do mouse window.onmousemove = function(i) { //i é W3C DOM, window.event Para o IE DOM, para obter compatibilidade com o IE //No entanto, parece que o IE atualmente suporta o W3C DOM, estou usando o IE11, também posso obter efeitos de interação do mouse comentando a próxima linha de código. 7/8/9 não é suportado. Sim, não testei //Claro que é correto adicionar i = i || mouse.x = i.clientX; ; } //Depois que o mouse sair da janela, remova o mouse Small square window.onmouseout = function() { mouse.x = null; mouse.y = null } //Desenhe um pequeno quadrado, o pequeno quadrado se move (movimento reverso ao tocar o limite), o pequeno quadrado é delimitado pelo mouse var animação = janela; .requestAnimationFrame || janela .webkitRequestAnimationFrame || janela.mozRequestAnimationFrame || janela.oRequestAnimationFrame || janela.msRequestAnimationFrame || 45) }; //O requestAnimationFrame suportado por cada navegador é diferente e é compatível com cada navegador function draw() { //Limpa a tela context.clearRect(0, 0, W, H); ].concat (quadrados); //Conecta (mescla) o pequeno array quadrado do mouse e outros pequenos arrays quadrados var x, v, A, B, z, y; máx. squares.forEach(function(i) { //Realize o movimento direcional de pequenos quadrados ix += i.xa; iy += i.ya; //Controle a direção do movimento de pequenos quadrados //Quando o pequeno quadrado atinge a janela limite, mova-se na direção oposta i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1 : 1); 1:1); //Os dois primeiros parâmetros de fillRect são as coordenadas x, y do canto superior esquerdo do retângulo, e os dois últimos são a largura e a altura respectivamente //Desenhe um pequeno quadrado context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); //Percorrer todos os elementos em w for (seja n = 0; n < w.length; n++) { x = w[n]; coordenadas xy de x existem se (i!== x && null !== xx && null !== xy) { x_diff = ix - xx //A diferença entre as coordenadas x de i e x y_diff = iy - xy; x_diff * x_diff + y_diff * y_diff; //Hipotenusa ao quadrado if (distância < x.max) { //Faça com que o quadrado pequeno i seja limitado pelo quadrado pequeno do mouse, ou seja, se a distância entre o quadrado pequeno i e o quadrado pequeno do mouse for muito grande, o quadrado pequeno i será limitado pelo quadrado pequeno do mouse, //resultando em vários pequenos quadrados com o mouse como centro, mouse.max /2 é o raio para fazer um círculo if (x === mouse && distance > x.max / 2) { ix = ix - 0,03 * x_diff; distância) / x.max; context.beginPath(); //Defina a espessura da linha do pincel para ser relacionada à distância entre os dois quadrados pequenos, variando de 0-0,5. quanto mais fina a linha, atingindo o máximo A linha desaparece quando a linha é desenhada context.lineWidth = A / 2 //Define a cor da linha do pincel como sc, que é a cor da tela, e a transparência como (A+0.2); , ou seja, quanto mais distantes estiverem os dois pequenos quadrados, mais clara será a linha context.strokeStyle = rgba (+). attr.color + , + (A + 0.2) + ); //Defina a pincelada para o quadrado pequeno i context.moveTo(ix, iy); , xy); //Completa o desenho da linha, ou seja, desenhando a linha conectando os quadradinhos context.stroke(); //Remove o pequeno quadrado i do array w //Evita que dois pequenos quadrados sejam conectados repetidamente w.splice(w.indexOf(i), 1 }); //window.requestAnimationFrame é semelhante a setTimeout, formando uma chamada recursiva. , //No entanto, window.requestAnimationFrame usa o intervalo de tempo do sistema para manter a melhor eficiência do desenho e fornece melhor otimização para tornar a animação mais suave //Após a otimização do navegador, a animação fica mais suave; //Quando a janela não é ativada, a animação irá parar para economizar recursos computacionais; //Aqui, após esperar 0,1 segundos, execute draw() uma vez. .requestAnimationFrame function() { desenhar() }, 100)} ();Endereço do código-fonte: https://github.com/jc1144096387/canvas_nest
ResumirO código acima é o código para analisar a tela HTML5 para obter efeitos dinâmicos de conexão do mouse em segundo plano introduzidos pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!