Exemplo de uso de tela para conseguir um lindo efeito de chuva

Este artigo fala sobre como usar o canvas para desenhar um lindo efeito de chuva. Vamos primeiro dar uma olhada no efeito final.

renderizações

Veja a imagem para analisar quais efeitos precisamos alcançar.

1. Efeito de queda de gota de chuva, mova o mouse para controlar a direção de queda

2. As gotas de chuva caem e se espalham em pequenas gotas de água. A direção do movimento das pequenas gotas de água é a mesma que a direção do movimento do mouse.

3. As gotas de chuva caem dentro de um determinado intervalo de coordenadas do mouse e se espalham em pequenas gotas de água. Da mesma forma, a direção do movimento das pequenas gotas de água é a mesma que a direção do movimento do mouse.

Ok, vamos dividir aproximadamente o efeito inteiro em três efeitos e alcançar esses três efeitos, e pronto.

Vamos fazer isso passo a passo.

A ideia para alcançar todo o efeito é,

Use uma matriz para salvar objetos de gota de chuva.

Um objeto de gota de chuva tem vários atributos usados ​​para representar a coordenada x, a coordenada y, o comprimento, a velocidade de queda, a cor da gota de chuva e um sinalizador para determinar se deve ser excluído.

Adicione um certo número de objetos gota de chuva à matriz, percorra a matriz, modifique a coordenada x e a coordenada y de cada objeto gota de chuva e use o canvas para desenhar dois pontos com base nas coordenadas do objeto gota de chuva, que juntos formam um gota de chuva.

Portanto, a chave para alcançar o efeito são as coordenadas

Coordenada x da gota de chuva: um número aleatório

Coordenada y da gota de chuva: -100, para permitir que as gotas de chuva entrem de fora da área visível

Coordenada gota de chuva x:原x坐标的值+ speed * speedx

a velocidade é um valor fixo, indicando a velocidade de queda das gotas de chuva,

speedx é uma variável relacionada à direção do movimento do mouse, speedx = speedx + (maxspeedx - speedx) / 50

E maxspeedx é um valor obtido com base na direção do movimento do mouse.

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2) ,

e.clientX: O valor da distância do mouse à esquerda da área visível

canvasEl.clientWidth: largura de toda a área visual

Em outras palavras, speedx é um valor que se aproxima gradualmente de maxspeedx

A faixa de valores de maxspeedx é de -1 a 1. Quanto mais próximo seu valor estiver de -1, a direção estará mais para a esquerda. Quanto mais próximo o valor estiver de 1, a direção estará mais para a direita.

Por que não usar apenas maxspeedx?

Isso evita que as gotas de chuva mudem de direção tão rapidamente. Em vez de mudar de direção imediatamente após a mudança do mouse, deve haver um pequeno atraso para que pareça melhor.

Se você usar maxspeedx, o efeito é assim

Se você usar speedx, o efeito é assim

Coordenada y da gota de chuva:原y坐标的值+ speed

A velocidade é a mesma mencionada na coordenada x acima. É um valor fixo que representa a velocidade de queda das gotas de chuva.

Ok, finalmente, eu uso o canvas para desenhar dois pontos de acordo com as coordenadas do objeto gota de chuva, e então os conecto, e a gota de chuva é desenhada.

A coordenada do primeiro ponto é relativamente simples. Obtenha diretamente a coordenada xey do objeto gota de chuva, que é a coordenada deste ponto.

Coordenadas do segundo ponto:

x坐标= 雨滴x坐标的值+ 雨滴长度* speedx

y坐标= 雨滴y坐标的值+ 雨滴长度

Por fim, conecte esses dois pontos e terá uma linha, que é uma gota de chuva.

Ao definir a coordenada x, a variável speedx é usada novamente. Isso faz com que a direção da gota de chuva e a direção de queda da gota de chuva sejam iguais.

Quando speedx não é usado, é assim

Ao usar speedx, este é o caso

A ideia aqui é um pouco semelhante ao efeito acima.

Use uma matriz para salvar pequenos objetos de gotas d'água.

Uma pequena gota d'água é na verdade um arco circular.

Um objeto de pequena gota d'água tem vários atributos usados ​​para representar as coordenadas da pequena gota d'água, a velocidade de movimento do eixo x, a velocidade de movimento do eixo y, o raio do círculo e um sinalizador para determinar se deve ser excluído.

Adicione um certo número de pequenos objetos de gota d'água à matriz, a seguir percorra a matriz, modifique a coordenada xey de cada objeto de pequena gota d'água e use a tela para desenhar um arco com base nos atributos de coordenadas e atributos de raio do pequeno objeto de gota d’água.

Portanto, o foco para alcançar o efeito ainda está nas coordenadas

Pequenas gotas de água aparecem quando a gota de chuva desaparece, então as coordenadas da pequena gota de água também são baseadas nas coordenadas da pequena gota de chuva. Quando você exclui uma gota de chuva, algumas pequenas gotas de água aparecerão e a direção do movimento da pequena gota de água será. também a direção da queda da gota de chuva Mouse A direção do movimento é a mesma, portanto a variável speedx mencionada acima ainda será necessária.

小水珠x坐标： 删除的雨滴x坐标+ 删除的雨滴长度* speedx

小水珠y坐标：删除的雨滴y坐标+ 删除的雨滴长度

Aqui precisamos usar dois atributos do objeto pequena gota d'água vx (a velocidade de mudança do valor do eixo x) e vy (a velocidade de mudança do valor do eixo y).

A coordenada x da pequena gota de água

vx = vx + speedx / 2

小水珠的x坐标=原x坐标+ vx ,

speedx: uma variável relacionada à direção do movimento do mouse mencionada acima. A função aqui é controlar a direção do movimento das pequenas gotas de água na mesma direção das outras direções.

speedx / 2 , o objetivo da divisão por 2 é diminuir a distância de movimento das pequenas gotas de água no eixo x e parecer mais realista.

A coordenada y da pequena gota d'água

vy = vy + gravity

小水珠的y坐标= 原y坐标+ vy;

vy: um número negativo

Gravidade: Gravidade, um número positivo, definido como 0,5 no código completo

Como a coordenada y original é um número positivo, o valor da coordenada y da pequena gota de água primeiro diminuirá e depois aumentará. Isso ocorre para obter o efeito de que a pequena gota de água primeiro subirá e depois cairá.

Finalmente, basta usar o canvas para desenhar um arco com base nos atributos de coordenadas e raios da pequena gota d'água. O arco é aleatório.

3. As gotas de chuva caem dentro de um determinado intervalo de coordenadas do mouse e se espalham em pequenas gotas de água. Da mesma forma, a direção do movimento das pequenas gotas de água é a mesma que a direção do movimento do mouse.

É fácil determinar o tamanho do círculo na imagem. Suponha que o raio do círculo seja 35. Podemos obter as coordenadas do mouse tomando as coordenadas do mouse como o centro do círculo e 35 como o raio. , podemos determinar o tamanho do círculo.

O ponto principal é como avaliar se as gotas de chuva entraram nesta faixa. Isso requer o uso do Teorema de Pitágoras.

Como uma gota de chuva é uma linha que conecta dois pontos. Para ver se a gota de chuva entrou nesse intervalo, você precisa observar as coordenadas do ponto abaixo da gota de chuva. Qual é a distância em linha reta do mouse é o comprimento do segmento de linha. AB na foto.

Teorema de Pitágoras: A soma dos quadrados dos dois lados retângulos de um triângulo retângulo é igual ao quadrado da hipotenusa.

AB = Math.sqrt (BC BC + AC AC)

BC = coordenada x da gota de chuva - coordenada x do mouse

AC = coordenada y da gota de chuva - coordenada y do mouse

O método Math.sqrt() é usado para calcular a raiz quadrada de um número

Depois de sabermos a distância em linha reta da gota de chuva ao mouse, compare-a com o raio do círculo. Se for maior que o raio, não está dentro do intervalo, caso contrário está.

Se estiver dentro do alcance, exclua as gotas de chuva e desenhe algumas pequenas gotas de água.

Resumir

Para conseguir esse efeito, o problema está na direção, na direção das gotas de chuva, na direção da queda das gotas de chuva e na direção do movimento das pequenas gotas de água. Tudo isso está relacionado à direção do movimento do mouse. use a tela para desenhar linhas continuamente com base na distância. Um arco servirá.

Código completo

 <!doctype html><html lang=en><head> <meta charset=UTF-8> <style> * { margin: 0; =estilo da tela=posição: altura absoluta: 100%; largura:100%;></canvas> <script> window.onload = main; function main() { // Obtém o elemento da tela var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); // A cor de fundo da tela var backgroundColor = '#000'; largura da área visual canvasEl. width = canvasEl.clientWidth; // A altura da tela é igual à altura da área visível canvasEl.height = canvasEl.clientHeight; // Matriz para salvar pequenas gotas de água // Depois que as gotas de chuva caem, elas se espalham em pequenas gotas de água. var dropList = []; então cai, principalmente por causa da gravidade. Por causa das variáveis ​​var gravity = 0.5; // Salva a matriz de gotas de chuva // Cada gota de chuva é uma linha desenhada var linelist = [] // Salva as coordenadas do mouse // mousePos[0; ] Representa o valor do eixo x, mousePos[1] representa o valor do eixo y var mousePos = [0, 0] // Seguindo o mouse, as gotas de chuva na área de tamanho mouseDis desaparecerão, formando um efeito de dispersão; // Com mousePos como o centro do círculo, mouseDis é Radius, as gotas de chuva dentro deste intervalo se espalharão e formarão muitas pequenas gotas de água var mouseDis = 35; // Atualize a animação uma vez e desenhe lineNum pingos de chuva. , mais densa será a chuva var. lineNum = 3; // Siga a direção do mouse para mudar a direção da chuva // Depois que o mouse se mover, a direção da chuva mudará lentamente, principalmente dependendo da variável speedx var speedx = 0; valor que speedx pode assumir // Quando speedx = maxspeedx, a direção da chuva mudará imediatamente com a direção do movimento do mouse var maxspeedx = 0; canvasEl.largura = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight } //Mova o mouse para acionar o evento window.onmousemove = function (e) { //Defina mousePos igual às coordenadas do mouse // e.clientX é a distância até o à esquerda da área visível da janela do navegador Distância // e.clientY é a distância do topo da área visível da janela do navegador mousePos[0] = e.clientX[1] =; e.clientY; // Defina o valor de maxspeedx através da posição do mouse, o intervalo de valores é de -1 a 1 // O valor de maxspeedx está relacionado a // 1. A direção da gota de chuva // 2. A direção da gota de chuva // 2. A direção da gota de chuva // gota de chuva caindo // 3. A velocidade na qual a direção de queda das gotas de chuva muda com a direção do movimento do mouse // 4. A direção do movimento de pequenas gotas de água // Quanto mais próximo o valor estiver de 1, a direção estará mais para a direita // Quanto mais próximo o valor estiver de -1, a direção estará mais à esquerda maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); // De acordo com os parâmetros, retorna uma cor rgb, usada para definir a cor das gotas de chuva function getRgb(r, g, b) { return rgb( + r + , + g + , + b + } // Desenha uma gota de chuva (uma linha) function createLine(e) { // Gera aleatoriamente o comprimento da gota de chuva var temp = 0,25 * (50 + Math.random() * 100); // Um ​​objeto de linha, representando uma gota de chuva var line = { // Velocidade de queda da gota de chuva: 5,5 * (Math.random() * 6 + 3), / / Determine se deseja excluir, se o valor for verdadeiro, exclua-o die: false, // Raindrop x coordenada posx: e, // Raindrop y coordenada posy: -50, // Comprimento da gota de chuva h: temp, // Cor das gotas de chuva: getRgb(Math.floor(temp * 255/75), Math.floor(temp * 255/75), Math.floor(temp * 255/75)) }; objeto line (gota de chuva), adicionado ao array que contém as gotas de chuva linelist.push(line); Desenhe uma pequena gota d'água (as pequenas gotas d'água após a dispersão das gotas de chuva são arcos) function createDrop(x, y) { // Um ​​objeto gota, representando um arco var drop = { // Determina se deseja excluir, valor Se verdadeiro, excluir die: false, // A coordenada x do centro do arco posx: x, // A coordenada y do centro do arco posy: y, // vx representa a velocidade na qual o valor do eixo x muda vx: (Math.random ( ) - 0,5) * 8, // vy representa a velocidade na qual o valor do eixo y muda. O intervalo de valores é: -3 a -9 vy: Math.random() * (-6) - 3, // O. raio do raio do arco: Math. random() * 1.5 + 1 }; return drop } // Desenha um certo número de pequenas gotas de água function madedrops(x, y) { // Gera aleatoriamente um número maxi // maxi Representa o número de pequenas gotas de água a serem desenhadas var maxi = Math.floor(Math.random() * 5 + 5 for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y) ); } } // Começa a chamar a função de atualização para atualizar a animação window.requestAnimationFrame(update); // Atualiza a função de animação update() { // Se o array que contém as pequenas gotas de água tiver conteúdo if (dropList.length > 0) { // Percorre a matriz que contém pequenas gotas de água dropList.forEach(function (e) { //Definir e.vx, vx representa a velocidade da mudança da coordenada x // (speedx)/2 é para, Torne a distância de movimento das pequenas gotas de água no eixo x mais curta e pareça mais realista // Faça também a direção do movimento das pequenas gotas de água igual à direção das gotas de chuva, a direção de queda das gotas de chuva, e a direção do movimento do mouse e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; //Definir e.vy, vy representa a velocidade de mudança da coordenada y // O intervalo de e.vy é de -3 a -9, e neste momento e.posy (coordenada y) deve ser um valor positivo, então o valor de e.posy primeiro diminuirá e depois aumentará // ou seja, as gotas de chuva se dispersarão em pequenas gotas de água, e as pequenas gotas de água subirão primeiro e depois queda.e.vy = e.vy + gravidade; + e.vy; // Se a coordenada y da pequena gota d'água for maior que a altura da área visível, defina o atributo die como true // Se a pequena gota d'água exceder a área visível, exclua-a se (e. posy > canvasEl.clientHeight) { e .die = true; } } // Exclua o membro da matriz cujo atributo die é verdadeiro // Exclua as pequenas gotas de água fora da área visível for (var i = dropList.length - 1 ; eu >= 0; eu- -) { se (dropList[i].die) { dropList.splice(i, 1 } } // Define a velocidade de mudança da direção da chuva, faixa de valores: -1 a 1 // Quando speedx = maxspeedx, a direção da chuva mudará speedx imediatamente à medida que o mouse se move, direção = speedx + (maxspeedx - speedx) / 50; // Desenhe um certo número de gotas de chuva com base no valor de lineNum for (var i = 0; i < lineNum; i++) { // Chame a função createLine, o parâmetro é a coordenada x da gota de chuva createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); gotas de chuva se espalham para formar muitas pequenas gotas de água Posição var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5; Percorra a matriz que contém as gotas de chuva linelist.forEach(function (e) { // Use o teorema de Pitágoras para determinar um intervalo dentro do qual as gotas de chuva se espalharão para formar pequenas gotas de água // e.posx + speedx * eh é a coordenada x de a gota de chuva/ / e.posy + eh é a coordenada y da gota de chuva var dis = Math.sqrt(((e.posx + speedx * eh) - mousePos[0]) * ((e.posx + speedx * eh) - mousePos[0]) + (e.posy + eh - mousePos[1]) * (e.posy + eh - mousePos[1])); // Se estiver na área mouseDis, exclua a gota de chuva e desenhe algumas pequenas gotas de água (arcos) // Perceba o efeito do mouse tocando as gotas de chuva e as gotas de chuva se espalhando em pequenas gotas de água if (dis < mouseDis) { // Exclua as gotas de chuva e.die = true; algumas pequenas gotas de água (arco circular) madedrops(e.posx + speedx * eh, e.posy + eh } // Se as gotas de chuva ultrapassarem a linha final, exclua as gotas de chuva e desenhe algumas pequenas gotas de água (arcos) if ((e.posy + eh) > endLine) { e.die = true; madedrops(e.posx + speedx * eh, e.posy + eh } // Se a coordenada y da gota de chuva for maior que a altura da área visível, defina o dado). atributo para verdadeiro // Se a gota de chuva ultrapassar a área visível, exclua-a if (e.posy >= canvasEl.clientHeight) { e.die = true } else { // Aumente gradualmente o valor da coordenada y da gota de chuva e.posy = e. posy + e.speed ; // Altera a coordenada x da gota de chuva // * speedx é usado para controlar a direção de queda da gota de chuva // Torna a direção de queda da gota de chuva igual à direção do movimento do mouse e.posx = e .posx + e.speed * speedx; Exclua os membros do array cujo atributo die é verdadeiro // Exclua as gotas de chuva na área do mouse, além da linha final e fora da área visível for (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1 } } // Renderização render(); // Chama recursivamente update para obter efeito de animação window.requestAnimationFrame(update }); // Função de renderização render() { // Desenha um retângulo tão grande quanto a área visível ctx.fillStyle = backgroundColor ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); // Desenha um efeito de gota de chuva ctx. lineWidth = 5; linelist.forEach(function (linha) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * speedx é usado para controlar a direção das gotas de chuva // Torna a direção das gotas de chuva igual à direção do movimento do mouse ctx.lineTo(line.posx + line. h * speedx, line.posy + line.h); ctx.stroke() }); // Desenha gotas de chuva que se espalham para formar pequenas gotas de água. dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); // Remova o comentário e você poderá ver o intervalo do mouse/* ctx.beginPath(); mousePos[1], mouseDis, 0, 2 * Math.PI.stroke() */ } } </script></body></html>;

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.