Compartilhamento do Código Principal do Efeito de Neve no Canvas

Sem muitas palavras, veja o código:

var ca = document.getElementById("ca");
 var ctx = ca.getContext('2d');
 //Função para gerar um número aleatório entre n e m
 function random(n,m){
 return Math.floor(Math.random() * (m - n) + n);
 }
 //Função para converter graus em radianos
 function toRd(angle){
 return angle * Math.PI / 180;
 }
 //Definir variáveis para armazenar o tamanho máximo da área de desenho
 var maxH = ca.height;
 var maxW = ca.width;
 //cada um dos atributos que um flôco de neve possui
 //coordenadas x, y, raio, ângulo,
 //Primeiro gerar100 flôcos de neve
 var snows = [];
 for(var i=0;i<200;i++{
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), //Este é o efeito de atualizar os dados
 "radius": random(2, 10)
 });
 }
 //Aplicar essas propriedades a cada flôco de neve
// for(var i=0;i<snows.length;i++) {
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);
// ra.addColorStop(0, "rgba(2551)";
// ra.addColorStop(1, "rgba(255,0,0,0.1)";
// ctx.fillStyle = ra;
// ctx.beginPath();
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fill();
// }
 //Se for escrito assim, não haverá efeito de animação
 //Para implementar o efeito de animação, é necessário que as características de cada neve se movam
 //Configurar o temporizador, alterar as características periodicamente
 var timer = setInterval(function () {
 snow();
 //Para implementar o efeito de animação, é necessário limpar o conteúdo da tela
 ctx.clearRect(0, 0, maxW, maxH);
 //Cada neve a cada16características que precisam mudar
 //coordenadas x, y, isso requer um novo valor para calcular, alterar seus valores
 //Para evitar a redefinição, utilize diretamente snows.radius para calcular
 for (var i = 0; i < snows.length; i++) {
 //No início, as coordenadas x, y e o raio r de cada neve
 //Atenção, não pode ser escrito assim, os dados das neves posteriores substituirão os anteriores, esse bug foi encontrado por muito tempo
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var d = snows[i].deg;
 //quantidade de variação y
 var yChange = 0.5 * snows[i].radius;
 //quantidade de variação x Aqui, a quantidade de variação x e y pode ser ligada a snows.deg,
 //de modo que cada neve siga seu próprio traçado, também pode ser configurado separadamente, todas as trajectórias das neves são iguais
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //Aqui, a fórmula triangular foi testada e o tan é o mais apropriado
 snows[i].top += yChange;
 snows[i].left += xChange;
 //Após essas etapas, as coordenadas x, y de cada neve mudaram, à medida que o tempo passa,
 //As neves sairão da tela, e as neves não existirão mais no final, aqui é necessário fazer uma decisão, remova as neves que ultrapassam a tela de snows
 //remova o conteúdo existente e adicione novas neves, essa etapa é feita no final, aqui apenas faça a decisão
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 //Aqui, x<0 é porque xChange pode ser negativo
 if(i>0){
  snows.splice(i--, 1);
  continue;//se ultrapassar o limite
  // Portanto, não há necessidade de continuar a renderização dessa neve, então essa decisão pode reduzir o consumo de desempenho
 }
 }
 //Iniciar renderização
 var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius);
 ra.addColorStop(0, "rgba(255,255,255,1)";
 ra.addColorStop(1, "rgba(255,255,255,0.1)";
 ctx.fillStyle = ra;
 ctx.beginPath();
 ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI);
 ctx.fill();
 }
 }, 16);
 //aumentar o número de neveflakes
 //é adicionar membros ao array snows
 function snow(){
 if(snows.length<220) {
 var l = 220 - snows.length;
 for(var i=0;i<l;i++{
 snows.push({
  "left": random(0, maxW),
  "top": 0,
  "deg": random(-20, 20), //Este é o efeito de atualizar os dados
  "radius": random(2, 10)
 }
 }
 }
 }

Isso é tudo o que há no artigo. Espero que o conteúdo deste artigo ajude a aprendizagem ou trabalho de alguém. Também esperamos que você dê mais apoio ao tutorial de gritos!

Declaração: O conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violar direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de infringir direitos autorais.)