Canvas绘制简易雨滴碰撞效果

news2025/11/4 5:01:13

实现会动的图形，向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。

效果图

在这里插入图片描述

源代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas雨滴效果</title>
    <style>
        body {
            margin: 0;
        }

        .rain {
            display: block;
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas class="rain"></canvas>
    <script>
        // 1.获取canvas并设置大小
        var canvas = document.querySelector('.rain');
        var ctxWidth, ctxHeight; // 定义画布的宽高
        ~~function setResize() { // 根据浏览器窗口的改变，实时改变canvas画布的宽高，和浏览器保持一致
            window.onresize = arguments.callee;
            ctxWidth = window.innerWidth;
            ctxHeight = window.innerHeight;
            canvas.width = ctxWidth;
            canvas.height = ctxHeight;
        }();
        var ctx = canvas.getContext('2d');

        // 2.绘制单个会动的雨滴，根据单个雨滴进行接下来的雨滴对象Rain处理
        /* var y = 10;
        setInterval(function () {
            // 添加雨滴蒙版，使用透明色，使雨滴向上看起来有逐渐透明的效果
            ctx.fillStyle = 'rgba(0,0,0,0.05)';
            ctx.fillRect(0, 0, ctxWidth, ctxHeight);
        
            //绘制雨滴小矩形
            ctx.fillStyle = 'blue';
            ctx.fillRect(10, y++, 4, 10);
        }, 1000 / 60); */

        function random(min, max) { // 生成从min到max之间的随机数
            return Math.random() * (max - min) + min;
        }

        // 3.设置雨滴对象
        function Rain() { };
        Rain.prototype = {
            init: function () {
                this.x = random(0, ctxWidth);
                this.y = 0;
                this.vY = random(4, 5); // 雨滴在Y轴上运动的速度
                this.h = random(0.8 * ctxHeight, 0.9 * ctxHeight); // 雨滴停止的Y轴位置，整个画布的80%-90%高度的地方
                this.r = 1; // 圆形半径
                this.vR = 1; // 圆形半径变化的速度
            },
            draw: function () {
                if (this.y <= this.h) {
                    //绘制雨滴小矩形
                    ctx.beginPath();
                    ctx.fillStyle = '#31f7f7';
                    ctx.fillRect(this.x, this.y, 4, 10);
                } else {
                    ctx.beginPath();
                    ctx.strokeStyle = '#31f7f7';
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                    ctx.stroke();
                }
            },
            move: function () {
                if (this.y <= this.h) {
                    this.y += this.vY;
                } else {
                    if (this.r <= 100) {
                        this.r += this.vR;
                    }
                    else {
                        this.init();
                    }
                }
                this.draw();
            }

        }

        // 创建多个雨滴的函数，将雨滴push进入arrRains中
        var arrRains = [];

        function createRain(num) {
            // 每200ms生成一滴雨滴
            for (var i = 0; i <= num; i++) {
                setTimeout(function () {
                    var rain = new Rain();
                    rain.init();
                    rain.draw();
                    arrRains.push(rain);
                }, 200 * i);
            }
        }

        createRain(50);

        setInterval(function () {
            // 添加雨滴蒙版，使用透明色，使雨滴向上看起来有逐渐透明的效果
            ctx.fillStyle = 'rgba(0,0,0,0.05)';
            ctx.fillRect(0, 0, ctxWidth, ctxHeight);
            for (item of arrRains) {
                item.move();
            }
        }, 1000 / 60); // 每1/60秒执行一次函数
    </script>
</body>

</html>