如何使用Javascript Canvas创建逼真的雨滴效果

在这篇文章中，我们将学习如何使用JavaScript Canvas创建逼真的雨滴效果。

我们在网站中使用这种雨滴效果可以使其更加美观，从而增加用户的互动。假设我们有一个网站，里面有一张描绘雨季的图片，但如果这张图片静态且没有显示雨滴，我们可以应用这种效果使其看起来更加逼真。

为了实现上述效果，我们使用了一个名为rainyday.js的开源库来包含canvas元素的效果。

方法： 我们使用了一个预构建的库rainyday.js。进入下载文件夹，解压rainyday.js的zip文件，然后导航到”src”目录。复制rainyday.js文件并将其粘贴到您的项目文件夹中。

当打开src文件夹后，我们可以看到项目中使用的rainyday.js库文件。

如何使用Javascript Canvas创建逼真的雨滴效果

示例: 创建一个 index.html 文件，并在文件的head部分中链接 rainyday.js 文件以使用该库。

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>

输出：

如何使用Javascript Canvas创建逼真的雨滴效果