English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Condivisione del codice principale dell'effetto neve su canvas

Non c'è molto da dire, guardate il codice:

var ca = document.getElementById("ca");
 var ctx = ca.getContext('2d');
 //Funzione per generare un numero casuale tra n e m
 function random(n,m){
 return Math.floor(Math.random() * (m - n) + n);
 }
 //Funzione per convertire gli angoli in radianti
 function toRd(angle){
 return angle * Math.PI / 180;
 }
 //Impostare variabili per memorizzare le dimensioni massime della lavagna
 var maxH = ca.height;
 var maxW = ca.width;
 //Caratteristiche di ogni fiocco di neve
 //Coordinate x,y, raggio del fiocco di neve, angolo,
 //Prima di tutto generare 100 fiocchi di neve
 var snows = [];
 for(var i=0;i<200;i++){
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), // Questo serve a aggiornare i dati
 "radius": random(2, 10)
 });
 }
 // Applicare queste proprietà a ogni fiocco di 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(255,0,0,1)");
// 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 si scrive così non ci sarà alcun effetto animazione
 //Per realizzare l'effetto animazione è necessario che la caratteristica di ogni fiocco di neve cambi
 //Impostare un timer per cambiare la caratteristica in modo periodico
 var timer = setInterval(function () {
 snow();
 //Per realizzare l'effetto animazione è necessario pulire il contenuto della lavagna
 ctx.clearRect(0, 0, maxW, maxH);
 //Ogni fiocco di neve deve cambiare la sua caratteristica ogni 16ms
 //Coordinate x, y, questo richiede un nuovo valore per il calcolo, cambiare i loro valori
 //Per evitare di definire di nuovo, si utilizza direttamente snows.radius per calcolare
 for (var i = 0; i < snows.length; i++) {
 //All'inizio, le coordinate x, y e il raggio r di ogni neve
 //Attenzione, non si può scrivere così, i dati delle nevi successive sovrascriveranno quelli precedenti, questo bug è stato trovato dopo molto tempo
//var r = snows[i].radius;
//var x = snows[i].left;
//var y = snows[i].top;
//var d = snows[i].deg;
 //Quantità di variazione y
 var yChange = 0.5 * snows[i].radius;
 //Quantità di variazione x: qui è possibile associare la quantità di variazione x e y a snows.deg
 //Così ogni neve seguirà la sua traiettoria, può anche essere impostata separatamente, tutte le traiettorie delle nevi sono le stesse
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //Questa formula trigonometrica è stata testata e tan è la più adatta
 snows[i].top += yChange;
 snows[i].left += xChange;
 //Dopo questi passaggi, le coordinate x, y di ogni neve sono cambiate, man mano che il tempo passa,
 //Le nevi escono dallo schermo, le nevi scompaiono alla fine, è necessario fare una verifica, rimuovere le nevi fuori dello schermo da snows
 //Rimuovere lì, quindi aggiungere nuove nevi, questa operazione viene eseguita alla fine, qui si fa solo la verifica
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 //Qui x<0 è perché xChange può essere negativo
 if(i>0){
  snows.splice(i--, 1);
  continue;//Se è fuori dalla gamma
  //Quindi questa neve non ha bisogno di ulteriori renderizzazioni, quindi questa condizione può ridurre il consumo di prestazioni
 }
 }
 //Inizio la renderizzazione
 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);
 // Aumenta il numero di fiocchi di neve
 // Aggiunge membri all'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), // Questo serve a aggiornare i dati
  "radius": random(2, 10)
 }
 }
 }
 }

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa essere di aiuto per il tuo studio o lavoro, e speriamo di ricevere più supporto per la guida a urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Ti potrebbe interessare