前端小练习——大雪纷飞(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已读不回?!试试这个宝藏小程序!大家快看这里

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

相关推荐
再学一点就睡1 小时前
深入理解 Redux:从手写核心到现代实践(附 RTK 衔接)
前端·redux
##学无止境##1 小时前
解锁Java分布式魔法:CAP与BASE的奇幻冒险
java·开发语言·分布式
做一位快乐的码农2 小时前
基于Spring Boot的旅行足迹分享社区的设计与实现/基于java的在线论坛系统
java·开发语言·spring boot
天天进步20152 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号2 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天3 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai4 小时前
React Native新架构源码分析
android·前端·react native
li理4 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真4 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere4 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端