canvas模拟百度天气搜索页下雨效果这是效果再上一个提取出来的百度自己下雨用的素材 rain.png 透明的

有没有前辈帮忙用canvas模拟百度天气搜索页下雨效果，万分感谢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            canvas{background: #fff;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="800" ></canvas>
        <script>
            var can = document.getElementById("canvas");
            //设置绘图环境
            var cxt = can.getContext("2d");
            //获取浏览器窗口的宽高
            var w = can.width = window.innerWidth;
            var h = can.height = window.innerHeight;
            //让画布的宽高跟随浏览器窗口的变化而变化
            window.onresize = function() {
                w = can.width = window.innerWidth;
                h = can.height = window.innerHeight;
            };
            //设置画笔颜色
            cxt.fillStyle = "aqua";
            
            var drops = [];
            // 创建雨滴对象
            function Drop() {}
            //添加对象方法
            Drop.prototype = {
                init: function() { //初始化方法 设置每个雨滴的初始化属性
                    this.x = random(0, w);//设置坐标
                    this.y = 0;//y方向的速度值
                    this.vy = random(4, 5); //雨滴下落的最大高度
                    this.l = random(0.8 * h, 0.9 * h);
                    this.r = 1; //波纹的初始半径
                    this.vr = 1; //半径增大的速度
                    //判断雨滴消失的透明度
                    this.a = 1; // =>0
                    this.va = 0.96; //透明度的变化系数
                },
                draw: function() { //绘制图形
                    if (this.y > this.l) { //雨滴下落到了指定位置 开始绘制圆形
                        cxt.beginPath(); //先开始路径
                        cxt.arc(this.x, this.y, this.r/4, 0, Math.PI * 2, false);
                        cxt.strokeStyle = "rgba(219,227,226," + this.a + ")";
                        cxt.stroke();
                    } else { //绘制下落的雨滴
                        cxt.fillStyle = "rgb(219,227,226)";
                        cxt.fillRect(this.x, this.y, 1, 10);
                    }
                    this.update();
                },
                update: function() { //更新坐标位置
                    if (this.y < this.l) {
                        this.y += this.vy
                    } else { //雨滴下落到了指定位置 开始绘制波纹
                        if (this.a > 0.03) {
                            this.r += this.vr;
                            if (this.r > 50) {
                                this.a *= this.va;
                            }
                        } else {
                            //重新初始化
                            this.init()
                        }
                    }
                }
            };
            for (var i = 0; i < 50; i++) {
                setTimeout(function() {
                    var drop = new Drop();
                    drop.init();
                    drops.push(drop);
                }, i * 300)
            }
            function move() {
                //先复制透明层再绘制雨滴 雨滴就把先绘制的透明层覆盖 下一次绘制透明层
                //就会把之前绘制的雨滴覆盖 若干的透明层叠加就会越来越不透明
                cxt.fillStyle = "rgba(15,15,15,0.1)";
                cxt.fillRect(0, 0, w, h);
                for (var k = 0; k < drops.length; k++) {
                    drops[k].draw();
                }
                requestAnimationFrame(move);
            }
            move();
            //生成随机数的方法
            function random(min, max) {
                return Math.random() * (max - min) + min; //min - max之间的随机数
            }
        </script>
    </body>
</html>

https://blog.csdn.net/zhuogan...

有没有前辈帮忙用canvas模拟百度天气搜索页下雨效果，万分感谢

canvas模拟百度天气搜索页下雨效果

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？