核心是用canvas管理雪花粒子状态并配合requestanimationframe实现动态下雪效果：通过动态设置canvas真实像素尺寸、定义含位置速度等属性的雪花类、批量生成粒子、每帧更新坐标并重绘，辅以旋转、渐变背景等技巧增强真实感。
核心是用 Canvas 管理雪花粒子状态，配合 requestAnimationFrame 持续更新和重绘，不是“画一朵雪花”，而是“让几百片雪各自动起来”。
自适应画布与渲染上下文
必须用 JS 动态设置 canvas 的 真实像素宽高，不能靠 CSS 缩放，否则雪花模糊：
- 获取 canvas 元素和 2D 上下文：
const canvas = document.getElementById('snowCanvas'); const ctx = canvas.getContext('2d'); - 写
resizeCanvas()函数：设canvas.width = window.innerWidth、canvas.height = window.innerHeight - 绑定窗口缩放事件：
window.addEventListener('resize', resizeCanvas)
定义雪花类并批量生成
每片雪是一个独立对象，含位置、速度、大小、透明度、左右飘移等属性：
-
x初始为Math.random() * canvas.width；y从屏幕上方外开始（如Math.random() * -100） -
speed在 1–5 之间随机，模拟不同下落快慢；size控制半径（常见 1–4px） -
opacity可设为Math.random() * 0.5 + 0.2，让远近雪花有层次感 - 初始化 200–3000 片（视性能而定），存入数组
flakes = []
动画循环与状态更新
每一帧做三件事：清空画布 → 更新每片雪坐标 → 重绘所有雪：
- 用
requestAnimationFrame(animate)替代setInterval，更流畅省资源 - 更新逻辑：垂直方向
y += speed；水平方向加轻微drift模拟风力（如x += Math.sin(y * 0.01) * 0.3） - 超出底部时，调用
reset()重置 x、y、size、speed 等，实现无限循环 - 绘制用
ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI * 2); ctx.fill();
增强真实感的小技巧
不用复杂物理，几处微调就能明显提升氛围：
- 给部分雪花加
rotation和rotateSpeed，每帧rotation += rotateSpeed，再用ctx.save()/ctx.restore()绘制旋转效果 - 背景用深蓝或灰蓝渐变（
createLinearGradient），避免纯黑 - 在 canvas 外层加
pointer-events: none，防止雪花遮挡下方按钮或链接 - 可叠加一层半透明白色 canvas 做“远景雪雾”，降低 opacity 并减慢 speed
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
