前端小练习——大雪纷飞(JS没有上限!!!)

大家好,我是小黄。

具体效果:(大雪缓缓下落)

完整代码:

复制代码
<!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已读不回?!试试这个宝藏小程序!大家快看这里

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

相关推荐
白总Server6 分钟前
智能座舱架构中芯片算力评估
linux·运维·服务器·开发语言·ai·架构·bash
wjm04100637 分钟前
C++日更八股--first
java·开发语言·c++
酷爱码42 分钟前
好看的个人主页HTML源码分享
前端·html
三思而后行,慎承诺1 小时前
react的fiber 用法
前端·javascript·react.js
wei3872452321 小时前
java练习2
java·开发语言·python
我的golang之路果然有问题1 小时前
案例速成GO+Socket,个人笔记
开发语言·笔记·后端·websocket·学习·http·golang
Deepsleep.1 小时前
前端性能优化面试回答技巧
前端·面试·性能优化
我的golang之路果然有问题1 小时前
快速了解Go+rpc
开发语言·经验分享·笔记·rpc·golang·go
一眼青苔2 小时前
python中 str.strip() 是什么意思
开发语言·python
heyCHEEMS2 小时前
[USACO09OCT] Bessie‘s Weight Problem G Java
java·开发语言·算法