Canvas烟雾效果需用粒子系统模拟：requestAnimationFrame驱动粒子运动与衰减，globalCompositeOperation="lighter"实现光晕叠加，shadowBlur柔化边缘，参数需反复调试。
Canvas 本身不内置“烟雾”效果，所谓烟雾是用粒子系统 + 透明度渐变 + 模糊模拟出来的视觉错觉；直接画一张 PNG 烟雾图贴上去不是真动画，也不可控。
用 requestAnimationFrame 控制粒子生命周期
烟雾的本质是一堆半透明、缓慢飘散、大小/透明度随时间衰减的粒子。靠 setTimeout 或固定 setInterval 会掉帧、卡顿，必须用 requestAnimationFrame 驱动循环：
- 每一帧更新所有粒子的
x、y（加随机偏移）、alpha（逐帧衰减）、size（可选缩放） - 粒子
alpha降到0.01以下就从数组中splice掉，避免内存堆积 - 每帧开头用
ctx.clearRect(0, 0, canvas.width, canvas.height)清屏——但别清成纯黑，留点残影才像烟
用 globalCompositeOperation = "lighter" 叠加光晕感
默认 "source-over" 是普通覆盖，画多了发灰；烟雾需要“越叠越亮”的叠加效果：
- 在绘制粒子前设
ctx.globalCompositeOperation = "lighter" - 粒子用
rgba(200, 220, 255, 0.08)这类高亮低透色，叠加后自然泛白雾感 - 切记：叠加模式只对后续绘制生效，画完烟雾后要手动切回
"source-over"，否则文字或 UI 元素也会变异常
用 ctx.shadowBlur 代替 CSS 滤镜做软边
想让粒子边缘柔和？别在 canvas 外套 filter: blur()——那会模糊整个 canvas，且性能差、不可控：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 直接在 canvas 内设
ctx.shadowColor = "rgba(200, 220, 255, 0.3)"和ctx.shadowBlur = 12 - 再用
ctx.fillRect(x, y, size, size)或ctx.fillCircle(x, y, size)绘制，阴影自动柔化边缘 -
shadowBlur值别超过20，否则模糊溢出、吃 GPU，低端机易卡
初始化粒子时避开 Math.random() 单点爆发
新手常写 for (let i = 0; i ，结果所有粒子同一时刻出生、同速飘散，看起来像一团匀速移动的云，不像自然烟雾：
- 给每个粒子加一个
delay属性（比如Math.random() * 60帧），在主循环里判断if (frameCount > particle.delay)才开始更新 - 初始位置别全集中在一点：用
x: centerX + (Math.random() - 0.5) * 40散开 - 初速度也加扰动：
vx: (Math.random() - 0.5) * 0.3，让有的往左飘、有的往上浮
真正难的不是画出一缕烟，而是控制它“什么时候浓、什么时候散、往哪边卷”。粒子数量、衰减系数、风向偏移这些参数调三次以上才可能接近你脑中的样子——别指望复制粘贴一段代码就搞定。
