烟雾背景靠粒子+流场+残影模拟，非直接绘制：双canvas结构（主画布渐隐残影、离屏画布绘粒子），轻量粒子系统含生命周期与扰动力场，辅以软边、运动模糊等视觉技巧，并适配多端性能。
制作烟雾缭绕的动态背景，关键不是“画烟”，而是用粒子+流场+残影模拟扩散感——Canvas 本身不渲染烟，它渲染的是带物理行为的透明粒子群，再靠视觉技巧“骗”出体积与流动。
构建双层 Canvas 结构
主画布负责显示，离屏画布（offscreen canvas）专用于单帧粒子绘制，避免每帧重绘干扰性能：
- 主 canvas 设置 position: fixed; z-index: -1; 置于页面最底层
- 主 canvas 每帧不清空，改用 ctx.fillStyle = 'rgba(0,0,0,0.04)'; ctx.fillRect(0,0,w,h); 实现渐隐残影
- 离屏 canvas 绘制不透明粒子点，再以低透明度 drawImage 到主 canvas 上，自然形成衰减轨迹
设计轻量级粒子系统
不用解流体方程，用带生命周期的粒子+扰动力场模拟飘散逻辑：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 初始化 400–600 个粒子，集中在底部或中心区域（烟源位置）
- 每个粒子含 x/y/size/vx/vy/life 属性；life 从 1.0 递减至 0，控制透明度与尺寸缩放
- 每帧叠加简化的风场力：鼠标位置为扰动中心，产生径向排斥；再加小幅度随机布朗运动（±0.08）保持不规则感
- 用 ctx.arc(x, y, r, 0, Math.PI*2) 绘制，r 随 life 缩小，大粒子显“浓”，小粒子显“散”
增强真实感的视觉技巧
硬边圆点毫无烟感，必须靠软化与模糊营造空气感：
- 开启抗锯齿：ctx.imageSmoothingEnabled = true;
- 给粒子加柔边：设置 ctx.shadowBlur = 6–10; ctx.shadowColor = 'rgba(255,255,255,0.7)'，比多次绘制更快
- 模拟运动模糊：按速度方向延伸画一条短透明线段（lineTo(x + vx*0.4, y + vy*0.4)），粗细随 |v| 动态变化
- 可选外层 CSS 模糊：filter: blur(0.8px) 加在 canvas 容器上，但仅在 Chrome/Firefox 启用，Safari 建议跳过
适配与性能要点
确保在不同设备稳定运行：
- 用 canvas.width = window.innerWidth * devicePixelRatio 适配高清屏，再用 CSS 缩放回原始尺寸
- 粒子数量随屏幕宽度动态调整（如 ≤768px 时减至 200 个），防止移动端卡顿
- 所有 Math.random() 提前缓存或节流，避免每帧重复调用；噪声函数推荐用 simplex-noise 库替代 random 实现平滑飘移
- requestAnimationFrame 驱动，禁用 setInterval —— 前者同步浏览器刷新节奏，更顺滑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
