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

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

相关推荐
快起来别睡了5 分钟前
深入浅出 Event Loop:前端工程师必须掌握的运行机制
前端·javascript
user297525876126 分钟前
别再用关键字搜了!手搓一个Vite插件,为页面上的标签打上标记
前端·javascript·vite
典学长编程8 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第五天(jQuery函数库)
javascript·css·ajax·html·jquery
野区小女王12 分钟前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
终是蝶衣梦晓楼13 分钟前
HiC-Pro Manual
java·开发语言·算法
尝尝你的优乐美29 分钟前
原来前端二进制数组有这么多门道
前端·javascript·面试
前端_yu小白31 分钟前
Vue2实现docx,xlsx,pptx预览
开发语言·javascript·ecmascript
金金金__1 小时前
事件循环-原理篇
javascript·浏览器
CF14年老兵1 小时前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
Pocker_Spades_A1 小时前
从 0 到 1 开发图书管理系统:飞算 JavaAI 让技术落地更简单
java·开发语言·java开发·飞算javaai炫技赛