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

在本文中，我们将学习如何使用 JavaScript 画布创建逼真的雨滴效果。

我们在我们的网站中使用这种雨滴效果来使它们更漂亮，从而增加用户交互。假设有一个网站，其中我们有一张季风图片，但如果图片是静态的并且没有显示雨滴，那么我们可以将其应用于它以使其逼真。

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

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

文件夹结构

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

打开src文件夹得到需要的库文件

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

HTML

  

    
    
    
  
    Rain Effect
  
    
        /* Adding css to the body */
          
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        /* setting Image height*/
          
        img {
            height: 100%;
        }
    

  

    
  
    
  
        // 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';
        }
    
  
    
    

  

输出：

雨天效应