最快路径是直接用tsparticles，5分钟上线可交互粒子背景；需禁用fullscreen、设detect_on为"canvas"、动态适配容器尺寸，并控制粒子数量防卡顿。
直接用 tsparticles 是最快路径，5 分钟内上线可交互粒子背景；自己手写 Canvas 粒子系统虽灵活，但调试成本高、易卡顿，除非你明确需要定制物理逻辑或图像驱动粒子。
为什么不能直接复制全屏粒子代码到 hero 区域
全屏粒子通常监听 window.innerWidth/window.innerHeight，而 hero 是固定高度的 DOM 容器（比如 <section class="hero"></section>）。强行复用会导致：
- 粒子溢出 hero 区域，在其他区块上乱飘
- 响应式缩放时
canvas宽高不随容器重绘，出现拉伸或留白 - 滚动时
canvas未设position: absolute或z-index，被内容遮盖或压住文字
tsparticles 配置必须关掉 autoSize 和 fullScreen
默认 fullScreen: { enable: true } 会接管整个 body 尺寸，必须显式禁用：
- 删掉
fullScreen: { enable: true }（它默认就是true） - 加上
detectRetina: false，避免高清屏下 canvas 被双倍放大导致模糊 -
interactivity.detect_on改成"canvas"，而不是"window" - 初始化时传入容器元素：
tsParticles.load("hero-particles", options)，并在 HTML 中确保<div id="hero-particles"></div>在 hero 内部
canvas 宽高必须用 getBoundingClientRect() 动态适配
关键不是“画粒子”，而是“让 canvas 精确贴合容器”：
- 给 hero 容器加
position: relative（作为 canvas 的定位上下文） -
canvas插入 hero 内部最顶层，设position: absolute; top: 0; left: 0; width: 100%; height: 100% - JS 中不再读
window.innerWidth，改用heroEl.getBoundingClientRect()获取实时宽高 - 每次
resize或scroll（如果 hero 是 sticky 或视差）后，调用canvas.width = rect.width和canvas.height = rect.height
桌面端粒子 ≤150 个、移动端 ≤60 个且关闭连线，透明度 ≥0.7 —— 这些数值不是建议，是滚动不卡顿、缩放不撕裂的临界点。很多人在开发时只测了初始尺寸，忘了 scroll 触发的重绘逻辑，结果上线后一滚动就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
