【javascript】雪花飘落1-CSDN博客

本文链接：https://blog.csdn.net/qq_63806300/article/details/130835219

这段代码创建了一个HTML5Canvas应用，用JavaScript动态生成并模拟飘落的雪花效果，背景为黑色，雪花为白色，通过调整随机函数实现不同的飘落轨迹和重置位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let context = canvas.getContext('2d');
        let w = window.innerWidth;
        let h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
        <!-- 雪花数量 -->
        let num = 20;
        <!-- 雪花位置 -->
        let snows = [];
        <!-- 随机产生雪花信息 -->
        for(let i=0;i<num;i++) {
            snows.push({
                x:Math.random()*w,
                y:Math.random()*w,
                r:Math.random()*10+1
            });
        }
        <!-- 雪花移动 -->
        let move = ()=> {
            for(let i=0;i<num;i++) {
                let snow = snows[i];
                snow.x += Math.random()*2+1;
                snow.y += Math.random()*2+1;
                if(snow.x>w) {
                    snow.x = 0;
                }
                if(snow.y>h) {
                    snow.y = 0;
                }
            }
        }
        <!-- 绘制雪花 -->
        let draw = ()=> {
            context.clearRect(0,0,w,h);
            context.beginPath();
            context.fillStyle = 'rgb(255,255,255)';
            context.shadowColor = 'rgb(255,255,255)';
            context.shadowBlur = 10;
            for(let i=0;i<num;i++) {
                let snow = snows[i];
                context.moveTo(snow.x,snow.y);
                context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
            }
            context.fill();
            context.closePath();
            move();
        }
        draw();
        <!-- 时间戳 -->
        setInterval(draw,30);
    </script>
</body>
</html>