在浏览器 Canvas 2D…

适用于用 Canvas 2D 在浏览器中绘制粒子系统、流场、噪声、分形和 L-System 等算法生成艺术。

适用场景

解决思路

1. 版本敏感：每个 API 名称、SDK gate 和浏览器支持声明都以 _jutsu/VERSIONS.md 中的验证日期为准；若该日期过旧，先重新验证再按版本号行动。
2. DPR 感知尺寸：用 setupCanvas 读取 window.devicePixelRatio || 1，设置 canvas.width = width * dpr、canvas.height = height * dpr，CSS 设为 canvas.style.width = `${width}px`、canvas.style.height = `${height}px`，getContext('2d') 后执行 ctx.scale(dpr, dpr)。
3. Resize 处理：用 ResizeObserver 监听 canvas.parentElement，在回调里从 entry.contentRect 取 width/height，按 DPR 重设 canvas.width/canvas.height，调用 ctx.scale(dpr, dpr)，再调用 draw() 重新渲染；返回 () => ro.disconnect() 以便清理。
4. RAF 动画循环：用 requestAnimationFrame(loop)，在 loop(time) 里计算 dt = Math.min((time - prevTime) / 1000, 0.1) 限制 delta 防止 spiral of death；更新 prevTime，调用 update(dt) 和 render(ctx)，再 requestAnimationFrame(loop)；停止用 cancelAnimationFrame(animId)。
5. 选择噪声类型：Perlin 平滑、有网格对齐偏差、较便宜，适合地形、云、柔和有机纹理；Simplex 无网格伪影、梯度更好、略贵，适合流场、有机运动、无缝平铺；Worley(Cellular) 基于到最近点距离、细胞状，适合 Voronoi 图案、焦散、裂纹、细胞纹理。
6. 噪声使用规则：总是缩放输入坐标（除以 noiseScale 因子），不要直接用原始像素坐标；用 octaves（fBm）叠加细节：以递增频率和递减振幅多次调用噪声；为噪声设置 seed 以保证可复现。
7. 实现 fBm：函数 fbm(x, y, octaves = 4, lacunarity = 2, gain = 0.5)，初始化 value=0, amplitude=1, frequency=1, maxAmp=0；循环 octaves 次累加 amplitude * noise2D(x * frequency, y * frequency)，maxAmp += amplitude，然后 amplitude *= gain、frequency *= lacunarity；最后返回 value / maxAmp 归一化到 [-1, 1]。
8. 粒子池模式：预分配固定数组，例如 POOL_SIZE = 10000，运行时绝不 new 或 splice；初始化每个粒子为 { x: 0, y: 0, vx: 0, vy: 0, life: 0, maxLife: 0, active: false }。
9. 粒子 spawn：若 aliveCount >= POOL_SIZE 则返回；取 p = particles[aliveCount++]；设置 p.x/p.y 为生成点，p.vx/p.vy 为 (Math.random() - 0.5) * 2，p.life = 0，p.maxLife = 60 + Math.random() * 60，p.active = true。
10. 粒子 update：从 i = aliveCount - 1 递减到 0；对每个 p 执行 p.x += p.vx、p.y += p.vy、p.life++；若 p.life >= p.maxLife，用最后一个存活粒子交换：particles[i] = particles[--aliveCount]、particles[aliveCount] = p、p.active = false。
11. 流场构建网格：把画布划分为单元格，cols = Math.ceil(width / cellSize)、rows = Math.ceil(height / cellSize)，用 field = new Float32Array(cols * rows)；对每个单元格填入 field[y * cols + x] = noise2D(x * 0.05, y * 0.05) * Math.PI * 2。
12. 流场查表：粒子位置映射到网格，col = Math.floor(p.x / cellSize)、row = Math.floor(p.y / cellSize)；若 col 在 0 到 cols-1 且 row 在 0 到 rows-1 范围内，取 angle = field[row * cols + col]。
13. 流场转向：对粒子执行 p.vx += Math.cos(angle) * force、p.vy += Math.sin(angle) * force；用阻尼防止速度失控，例如 p.vx *= 0.98、p.vy *= 0.98；逐帧累加跟随。
14. L-System 概念：用字符串重写 + 海龟图形编码递归结构；组件包括 Axiom（起始字符串，如 F）、Rules（产生式，如 F -> F[+F]F[-F]F）、Angle（每个 + / - 的海龟转向角）、Iterations（应用规则次数）。
15. 实现 lsystem(axiom, rules, iterations)：let current = axiom；循环 iterations 次，执行 current = current.split('').map(c => rules[c] || c).join(''); 返回 current。
16. 实现 drawLSystem(ctx, commands, len, angle)：维护 stack；遍历 commands 字符：'F' 执行 ctx.lineTo(ctx._x += Math.cos(ctx._a) * len, ctx._y += Math.sin(ctx._a) * len)；'+' 执行 ctx._a += angle；'-' 执行 ctx._a -= angle；'[' 压入 { x: ctx._x, y: ctx._y, a: ctx._a }；']' 弹出并恢复 ctx._x/ctx._y/ctx._a，然后 ctx.moveTo(s.x, s.y)。
17. 双缓冲：创建 offscreen = document.createElement('canvas') 并设 width/height 与主 canvas 一致，取 offCtx；渲染时先在 offCtx 上用 offCtx.fillStyle = 'rgba(0, 0, 0, 0.05)' 和 fillRect 做拖尾淡出，再 drawParticles(offCtx)，最后 ctx.drawImage(offscreen, 0, 0) blit 到可见画布。
18. 不要每帧 clearRect 做拖尾：clearRect 会销毁拖尾；改用半透明填充，如 ctx.fillStyle = 'rgba(0, 0, 0, 0.02)'、ctx.fillRect(0, 0, w, h)。
19. 不要在动画循环里 getImageData：它会从 GPU 回读，极慢；只在绝对必要时用（例如一次性颜色采样）；做法是循环外 const colorMap = ctx.getImageData(0, 0, w, h)，需要取色时用 getColor(x, y) 按索引 i = (y * w + x) * 4 读取 colorMap.data。
20. 始终为清晰度尊重 DPR：不缩放会在 Retina 上模糊；设置 const dpr = window.devicePixelRatio || 1，canvas.width = 800 * dpr、canvas.height = 600 * dpr，canvas.style.width = '800px'、canvas.style.height = '600px'，再 ctx.scale(dpr, dpr)。
21. 不要在热循环分配：update() 或 render() 内不要 new、对象展开、创建数组；全部预分配。反面例子是 particles.forEach 里每帧每粒子创建 { x: Math.cos(a), y: Math.sin(a) }；正面做法是复用 let fx = 0, fy = 0，再用 for 循环赋值 particles[i].vx += fx。
22. 按需加载子技能：需要噪声实现、粒子池、流场、L-system、吸引子时加载 references/algorithms.md；需要动画过渡的时序与缓动时加载 ../motion-principles/SKILL.md；需要 3D 生成（shaders、GPU 粒子）时加载 ../threejs-r3f/SKILL.md。

适用边界 · 注意事项

• 需要 3D/WebGL/GPU 粒子或 shader 时，不适用本 Canvas 2D 经验，应改用 threejs-r3f 子技能。
• 需要在动画循环中每帧 getImageData 做像素回读/处理时，不适用，因为会阻塞渲染管线、性能极差。
• 需要精细的动画过渡时序与缓动编排时，不适用本技能核心，应参考 motion-principles。