Canvas流体效果本质是粒子系统加速度场更新：用800–2000个粒子在二维速度场中运动，以显式欧拉法积分，贝塞尔曲线连接邻近粒子；关键在速度场计算、粒子响应与防抖连点逻辑。
canvas流体效果本质是粒子系统 + 速度场更新
Canvas 上所谓“流体”，不是真物理模拟，而是用大量粒子（Point）在二维速度场中运动，并用贝塞尔曲线或线段连接邻近粒子形成视觉上的“流动感”。关键不在于渲染多酷，而在于速度场怎么算、粒子怎么响应、连点逻辑怎么避免抖动或断裂。
常见错误是直接照搬 Three.js 或 p5.js 的流体示例，硬套到原生 canvas 2D 上——结果帧率掉到 10fps、连线乱飞、鼠标拖拽后粒子炸开。原因往往是没控制好积分步长、没做邻域查询剪枝、或用了 requestAnimationFrame 但没限帧。
- 粒子数建议控制在 800–2000 个之间；超过 3000 时，
Math.sqrt()遍历邻域会明显卡顿 - 速度场更新必须用显式欧拉法（
pos += vel * dt），别用 Verlet——Canvas 没有稳定物理引擎支撑 - 连线逻辑里，距离判断必须加阈值（如
dist ），否则远距离误连导致画面发散
用 TypedArray 存粒子位置和速度，别用对象数组
每个粒子存 x、y、vx、vy 四个浮点数，用 Float32Array 打包比 [{x, y, vx, vy}] 快 3–5 倍。V8 对 TypedArray 的循环优化很成熟，而对象数组每次访问属性都要查原型链。
实操上，初始化这样写：
立即学习“前端免费学习笔记（深入）”；
const N = 1500;
const positions = new Float32Array(N * 2); // [x0,y0,x1,y1,...]
const velocities = new Float32Array(N * 2);
for (let i = 0; i < N; i++) {
const idx = i * 2;
positions[idx] = Math.random() * canvas.width;
positions[idx+1] = Math.random() * canvas.height;
velocities[idx] = (Math.random() - 0.5) * 0.8;
velocities[idx+1] = (Math.random() - 0.5) * 0.8;
}后续更新时直接按索引读写，避免创建临时对象。如果加鼠标影响，只更新靠近鼠标的粒子速度（用 Math.hypot() 判断距离），别全量重算。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
连线用 ctx.beginPath() + ctx.bezierCurveTo()，别画直线
直线连点看着像蜘蛛网，贝塞尔曲线才能出“流体”质感。核心技巧是：对每个粒子，找它最近的 3–5 个邻居，用它们的位置插值生成控制点。
典型写法：
ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
for (let j = 0; j < neighbors.length; j++) {
const p1 = neighbors[j];
const cx = (p0.x + p1.x) * 0.5;
const cy = (p0.y + p1.y) * 0.5;
ctx.bezierCurveTo(cx, cy, cx, cy, p1.x, p1.y);
}
ctx.stroke();注意三点：一是必须在循环外调一次 ctx.beginPath()，否则每根曲线都新建路径，性能崩；二是控制点设为中点，比随机偏移更稳定；三是 strokeStyle 要带透明度（如 "rgba(100,180,255,0.15)"），靠多帧叠加出“拖尾”效果，而不是靠 globalAlpha 全局设——后者会让文字或其他 canvas 内容也变透明。
鼠标交互别直接改粒子速度，用局部涡度场扰动
直接给粒子赋值 vx = mx; vy = my 会导致粒子瞬间甩飞、连线断裂。正确做法是构造一个以鼠标为中心的旋转速度场（类似涡旋）：
- 计算粒子到鼠标的向量
dx, dy - 距离
r = Math.hypot(dx, dy)，若r > 150就跳过 - 速度增量为：
dvx = -dy / (r + 1) * strength，dvy = dx / (r + 1) * strength
这样粒子会绕鼠标旋转而非径向逃逸，且随距离衰减自然。strength 控制灵敏度，初始设 0.03～0.06 即可。还要加阻尼（每帧乘 0.99），否则扰动停不下来。
真正难调的是涡度半径和阻尼系数的配合——差 0.01 就可能从丝滑变粘滞，或从旋转变震荡。这没有通用值，得盯着 canvas 实时改再刷新看。
