前端小练习——大雪纷飞（JS没有上限！！！）

小黄编程快乐屋2024-12-05 9:26

大家好，我是小黄。

具体效果：（大雪缓缓下落）

完整代码：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪花形状的雪</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #1c1c1c;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>

<canvas id="snowCanvas"></canvas>

<script>
    const canvas = document.getElementById('snowCanvas');
    const ctx = canvas.getContext('2d');

    // 设置画布的大小为窗口大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 雪花的数量
    const snowflakesCount = 200;
    
    // 雪花数组
    const snowflakes = [];

    // 绘制六边形雪花
    function drawSnowflake(x, y, size, angle) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
            const currentAngle = (i * Math.PI) / 3;
            const nextAngle = ((i + 1) * Math.PI) / 3;
            ctx.moveTo(0, 0);
            ctx.lineTo(size * Math.cos(currentAngle), size * Math.sin(currentAngle));
            ctx.lineTo(size * Math.cos(nextAngle), size * Math.sin(nextAngle));
        }
        ctx.closePath();
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.restore();
    }

    // 雪花类
    class Snowflake {
        constructor() {
            // 随机初始位置
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.size = Math.random() * 4 + 4; // 雪花的大小（4~8）
            this.speed = Math.random() * 3 + 1; // 雪花的下落速度
            this.wind = Math.random() * 0.5 - 0.25; // 随机的风力，控制雪花的左右漂动
            this.angle = Math.random() * Math.PI * 2; // 雪花的旋转角度
            this.rotationSpeed = Math.random() * 0.02 - 0.01; // 雪花的旋转速度
        }

        // 更新雪花位置
        update() {
            this.y += this.speed; // 下落
            this.x += this.wind; // 左右漂移
            this.angle += this.rotationSpeed; // 旋转

            // 如果雪花掉出画布，重新设置位置
            if (this.y > canvas.height) {
                this.y = 0;
                this.x = Math.random() * canvas.width;
            }
        }

        // 绘制雪花
        draw() {
            drawSnowflake(this.x, this.y, this.size, this.angle);
        }
    }

    // 初始化雪花
    for (let i = 0; i < snowflakesCount; i++) {
        snowflakes.push(new Snowflake());
    }

    // 绘制动画
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的帧

        // 更新并绘制每一片雪花
        snowflakes.forEach(snowflake => {
            snowflake.update();
            snowflake.draw();
        });

        requestAnimationFrame(animate); // 请求下一帧
    }

    // 开始动画
    animate();
</script>
</body>
</html>

各位小伙伴还在BOSS直聘hr已读不回？！试试这个宝藏小程序！大家快看这里。

创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！