Cómo utilizar HTML5canvas para hacer caer copos de nieve

Este artículo presenta principalmente el lienzo HTML5 para lograr el efecto especial de los copos de nieve que caen. El efecto logra un efecto de animación fascinante y realista. Los amigos interesados ​​pueden consultarlo.

Ver allí. Hay muchas pantallas en Internet que muestran el efecto de los copos de nieve html5 volando, lo cual es realmente fascinante. Creo que todos están tan emocionados como yo y también tienen mucha curiosidad y quieren estudiar cómo implementar el código. Se puede descargar de muchos lugares, pero también hay ideas y análisis de las dificultades de otras personas al realizar este tipo de animaciones.

Acabo de estudiar un poco estos días y aproveché el tiempo para analizarlo paso a paso desde el análisis de la demanda, los puntos de conocimiento y la programación. Si trato de lucirme frente a ti. , no seas ridículo.

La representación final es la siguiente:

Figura 1

1. Análisis de demanda

1. p >En este ejemplo, la forma de los copos de nieve es circular

2 El número de copos de nieve es fijo

Observa atentamente el número de copos de nieve blancos según la Figura 1. Durante la caída. En el proceso, la cantidad de copos de nieve en toda la imagen debe ser fija. Sí, este requisito debe obtenerse a través de nuestra observación y análisis. Esto es consistente con la escena que vemos en la vida real donde los copos de nieve vuelan por todo el cielo.

3. Los tamaños de los copos de nieve son inconsistentes

Cada copo de nieve tiene un tamaño diferente, lo que significa que el radio del copo de nieve es aleatorio. Esto también concuerda con la escena en la que vemos copos de nieve volando por todo el cielo en la vida real.

4. La posición de los copos de nieve se está moviendo

Los copos de nieve caen y, naturalmente, sus posiciones también se están moviendo.

2. Puntos de conocimiento

1. Utilice Html5 Canvas+JavaScript para dibujar un círculo, formando un copo de nieve circular.

En Html5, debe utilizar Canvas y JavaScript Dibuja un círculo para formar un copo de nieve circular - arc(x, y, r, start, stop

2. Genera copos de nieve circulares con diferentes radios y coordenadas

En este ejemplo, cuando la página web se carga por primera vez, se necesita generar una cierta cantidad de copos de nieve con diferentes radios y posiciones, por lo que el radio y las coordenadas son números aleatorios durante el proceso de caída de los copos de nieve, el radio permanece; sin cambios y las coordenadas cambian dentro de un cierto rango. Por lo tanto, las coordenadas también son números aleatorios en este momento - Math.random()

Programación

1. >

Pon un lienzo y configúralo El color de fondo de todo el cuerpo es negro

Código HTML:

Su navegador no soporta lienzo

Código CSS:

* {

margen:

relleno: 0;

}

#mycanvas {

fondo: negro

}El efecto es el siguiente:

Nota: el lienzo tiene una altura y un ancho iniciales por defecto, por lo que no tienes que preocuparte por eso

2. Muestra el lienzo en pantalla completa

El código JavaScript es el mismo. siguiente:

//Obtener el lienzo mycanvas

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d) ");

//Ancho del lienzo

var wid = window.innerWidth;

//Alto del lienzo

var hei = ventana .innerHeight;

can.width=wid;

can.height=hei;El efecto en este momento es el siguiente:

3. número fijo de copos de nieve

De acuerdo con nuestro análisis de demanda anterior y la interpretación de los puntos de conocimiento, en primer lugar, el número de copos de nieve es fijo, por lo que aquí debemos definir una variable var nieve = 100; el número de copos de nieve es 100;

Al generar copos de nieve, el radio y la posición de cada copo de nieve son diferentes. Ponemos cada copo de nieve como un objeto, los atributos de este objeto incluyen: radio, coordenadas (X, Y), entonces un objeto copo de nieve se puede escribir como var snowOject={x:1,y:10,r:5}, que representa una coordenada de (1,10) Un copo de nieve circular con un radio de 5; , dado que el radio y las coordenadas son números aleatorios, Math.random() se usa para generar el radio y las coordenadas (X, Y) para 100 copos de nieve respectivamente;

Entonces tenemos 100 copos de nieve aquí, así que en orden Para facilitar las operaciones posteriores, utilizamos una matriz para guardar estos 100 objetos de copo de nieve.

El código JavaScript es el siguiente:

//Número de copos de nieve

var nieve = 100

//Coordenadas del copo de nieve y; radio

var arr = []; //Guarda las coordenadas y el radio de cada círculo

for (var i = 0; i < snow; i++) {

arr.push( {

x: Math.random() * wid,

y: Math.random() * hei,

r: Math.random() * 10 + 1

})

}4. Dibujar copos de nieve

Arriba hemos generado 100 radios y coordenadas de copos de nieve (X, Y). ), aquí está Use lienzo para dibujar copos de nieve en un bucle (aquí, dibuje un círculo aquí

El código JavaScript es el siguiente:

//Dibujar copos de nieve<). /p>

función DrawSnow() {

ctx.fillStyle="blanco";

ctx.beginPath(); = 0; i < nieve; i++) {

var p = arr[i];

ctx.moveTo(p.x,p.y); arc(p.x,p.y,p.r,0 ,2*Math.PI,false);

}

ctx.fill()

ctx.closePath; (); Luego llame a la función DrawSnow(), el efecto es el siguiente:

Puede intentar actualizar la página web varias veces para ver si se generarán copos de nieve de diferentes tamaños y posiciones (normalmente es así). posible). Si hace esto, estará cerca del efecto final.

Nota: dado que aquí es necesario dibujar 100 círculos, las coordenadas de inicio del dibujo se redefinen cada vez que se dibuja un círculo: ctx.moveTo. (p.x,p.y); de lo contrario, se producirán efectos extraños. Si no lo cree, puede intentarlo.

5. Copos de nieve revoloteando

Hemos dibujado 100 copos de nieve arriba Desafortunadamente. , solo podemos ver el efecto cambiante actualizando la página web, pero lo que debemos lograr es que los copos de nieve sigan moviéndose.

En primer lugar, necesitamos usar la función setInterval para volver a dibujar los copos de nieve continuamente. El intervalo aquí es de 50 milisegundos: setInterval(DrawSnow,50);

Al mismo tiempo, las coordenadas de cada copo de nieve (X, Y) deben cambiar constantemente (dentro de un cierto rango, los copos de nieve aquí caen desde la parte superior izquierda hasta la parte inferior derecha, por lo que los valores de las coordenadas X e Y de cada flor son constantemente). aumentando Luego usamos una función SnowFall () Definir las reglas para la caída de los copos de nieve

El código de la función es el siguiente:

//Copos de nieve cayendo

función SnowFall. () {

for (var i = 0; i < nieve; i++) {

var p = arr[i]; .random() * 2 + 1;

if (p.y > hei) {

p.y = 0

}