En este artículo, aprenderemos cómo podemos crear efectos de gotas de lluvia realistas utilizando el lienzo de JavaScript .
Usamos este efecto de gota de lluvia en nuestros sitios web para hacerlos más hermosos y aumentar la interacción del usuario. Supongamos que hay un sitio web en el que tenemos una imagen del monzón, pero si la imagen es estática y no muestra gotas de lluvia, podemos aplicarla para que sea realista.
Para implementar lo anterior, estamos usando una biblioteca de código abierto llamada rainyday.js para incluir dicho efecto usando el elemento canvas.
Enfoque: Usamos una biblioteca preconstruida llamada rainyday.js . Vaya a la carpeta de descargas y extraiga el archivo zip de rainyday.js y luego navegue hasta el directorio «src». Copie el archivo rainyday.js y péguelo en la carpeta de su proyecto.
Estructura de carpetas
Cuando se abre la carpeta src , podemos ver el archivo de biblioteca rainyday.js utilizado en el proyecto.
Abra la carpeta src para obtener el archivo de biblioteca requerido
Ejemplo: Cree un archivo index.html y vincule el archivo rainyday.js en la sección principal del archivo para usar la biblioteca.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rain Effect</title>
<style>
/* Adding css to the body */
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
/* setting Image height*/
img {
height: 100%;
}
</style>
</head>
<body onload="render();">
<img src="" alt="" id="back">
<script>
// Creating a function when our document loads
function render() {
var image = document.getElementById('back');
image.onload = function() {
// Initiating a object of rainyday library
var engine = new RainyDay({
image: this
});
// Now rendering them on the screen
// first element - size of drops,
// second element - size of effect drops produced
// third element - Quantity of drops
engine.rain([
[10, 5, 10]
], 100);
};
image.src =
'https://media.geeksforgeeks.org/wp-content/uploads/20210802132841/geeks.jpg';
}
</script>
<!-- Linking rainyday.js library file -->
<script src="src/rainyday.js"></script>
</body>
</html>
Producción:
efecto de dia de lluvia
Publicación traducida automáticamente
Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA