master

分支 (1)

管理

管理

master

animation-rain
/
animation-rain.html

<!doctype html>
<html lang='zh-cn'>
    <head>
        <title>彩色雨滴</title>
        <meta charset='utf-8'>
        <meta name='keywords' content=''>
        <meta name='description' content=''>
        <style>
            body{font-family:'microsoft yahei',serif;user-select:none;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}
            canvas{
                display: block;
                background-color: rgb(0,0,0)
            }
        </style>
    </head>
    <body>
        <canvas></canvas>
        <script>
            let canvas = document.querySelector("canvas");
            let canCon = canvas.getContext("2d");
            let w, h;
            let rainArry = [];//用来存储新生成的雨滴
            ~~function setSize() {
                window.onresize = arguments.callee;
                w = window.innerWidth;
                h = window.innerHeight;
                canvas.width = w;
                canvas.height = h;
            }()

            function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            class Rain {
                constructor() {

                }
                init() {
                    this.y = 0;//雨滴的初始化Y轴坐标
                    this.x = random(0, w);//雨滴的初始化X轴坐标
                    this.v = random(2, 4);//雨滴的下落速度
                    this.n = random(0.65 * h, 0.85 * h);//雨滴绽放的位置
                    this.r = 2;
                    this.maxR = 50;
                    this.a = 1;
                    this.va = random(0.9, 0.98);
                }
                draw() {

                    if (this.y < this.n) {
                        canCon.fillStyle = "#3ff";
                        canCon.fillRect(this.x, this.y, 3, 10);
                    } else {
                        canCon.strokeStyle = `rgba(${random(0, 255)},${random(0, 255)},${random(0, 255)},${this.a})`;
                        canCon.beginPath();
                        canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                        canCon.stroke();
                    }
                }
                move() {
                    if (this.y < this.n) {
                        this.y += this.v;
                    } else {
                        if (this.a > 0.05) {
                            this.r++;
                            this.a *= this.va;

                        } else {
                            this.init();
                        }
                    }
                    this.draw();
                }
            }

            function createRain(num) {
                for (let i = 0; i < num; i++) {
                    setTimeout(function () {
                        let rain = new Rain();
                        rain.init();
                        rain.draw();
                        rainArry.push(rain);
                    }, 200 * i)

                }
            }
            createRain(30);
            setInterval(() => {
                canCon.fillStyle = "rgba(0,0,0,0.12)";
                canCon.fillRect(0, 0, w, h);
                for (let item of rainArry) {
                    item.move();
                }
            }, 1000 / 60);
        </script>
    </body>
</html>