用HTML5 Canvas实现雪花飘落动画，核心是随机生成100–200片雪花，每片含位置、大小、速度、晃动幅度和透明度属性，通过requestAnimationFrame逐帧更新y坐标与x方向正弦摆动，并重置越界雪花，配合深色背景与半透明绘制增强景深与真实感。
用 HTML5 Canvas 制作雪花飘落动画，核心是模拟雪花的随机位置、大小、下落速度和轻微左右晃动，再通过 requestAnimationFrame 持续重绘实现自然飘落效果。关键不在于复杂物理，而在于视觉节奏与随机感的平衡。
1. 初始化 Canvas 与基础设置
先获取 canvas 元素和绘图上下文，设为全屏或指定尺寸，并关闭抗锯齿提升性能：
- 用
canvas.width = window.innerWidth和canvas.height = window.innerHeight适配窗口 - 设置
ctx.imageSmoothingEnabled = false避免雪花边缘模糊 - 推荐使用深蓝/墨黑背景（如
#0a1929），让白色雪花更醒目
2. 定义雪花类（或对象结构）
每片雪花是一个独立对象，含位置、速度、大小、透明度、左右偏移幅度等属性：
-
x：初始横坐标（随机在画布宽度内） -
y：初始纵坐标（从顶部上方随机起始，避免突兀出现） -
size：0.5–4 的浮点数，控制半径或直径 -
speed：1–5 像素/帧，决定下落快慢 -
sway：0.1–0.8，用于水平微幅摆动（可用正弦函数驱动） -
alpha：0.4–1.0，让远处或小雪花更透明，增强景深
生成 100–200 片雪花存入数组，避免过多影响性能。
立即学习“前端免费学习笔记（深入）”；
3. 动画循环与绘制逻辑
在 requestAnimationFrame 回调中逐帧更新并重绘：
- 用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空画布（注意：不要用fillRect覆盖背景色，否则会掩盖半透明雪花） - 遍历雪花数组：更新
y += speed，用x += Math.sin(y * 0.01) * sway实现自然晃动 - 当雪花落到画布底部以下（
y > canvas.height + size），重置其到顶部上方，保持循环 - 绘制时用
ctx.beginPath()+ctx.arc(x, y, size, 0, Math.PI * 2)，再设ctx.fillStyle = `rgba(255,255,255,${alpha})`
4. 增强真实感的小技巧
不用写物理引擎，几处细节就能明显提升氛围：
- 大小与速度反相关：大雪花下落快、小雪花飘得慢且更易被风吹偏
-
添加轻微旋转：对每片雪花记录
rotation，每帧加0.02–0.08，用ctx.save() → ctx.rotate() → 绘制 → ctx.restore() - 分层雪花：近处大雪花不透明、晃动小；远处小雪花透明、晃动略大，可建两组数组分别更新
- 监听
window.onresize重新设置 canvas 尺寸并重置雪花位置
