Canvas水墨晕染必须用getImageData像素级控制，因CSS滤镜无法识别图像结构、生成新像素，且边缘硬、无涨墨渴笔过渡；核心三步为离屏渲染、Sobel梯度检测、指数衰减+均值滤波扩散。
Canvas 水墨效果不能靠 filter 或 css 实现真正晕染，必须用 getImageData 做像素级控制——这是目前唯一能复现宣纸渗透、飞白、浓淡渐变的可行路径。
为什么 filter 写不出真水墨？
CSS 滤镜是全局后处理，它不识别图像结构，也不能生成新像素。你看到的“水墨感”只是灰度+模糊+对比度的错觉：
-
blur(0.4px)稍大就变油画，稍小又看不出晕开 -
grayscale()会吃掉所有中间灰阶，导致墨色发平、无层次 -
drop-shadow()方向固定、衰减线性，而真实墨迹是各向异性扩散 - 所有这些叠加后，边缘仍是硬边，没有毛笔提按带来的“涨墨”或“渴笔”过渡
getImageData 实现晕染的关键三步
核心不是“画墨”，而是模拟墨在纤维中的物理响应。流程必须按顺序执行，跳步会导致晕染发糊或断层：
- 先用
ctx.drawImage()把原图渲染到离屏canvas，确保尺寸整数对齐（避免双线性插值污染像素） - 调用
ctx.getImageData(0, 0, width, height)获取Uint8ClampedArray，对每个像素做灰度转换：0.299 * r + 0.587 * g + 0.114 * b - 用 Sobel 算子（
[[−1,0,1],[−2,0,2],[−1,0,1]]和垂直卷积核）算梯度幅值，只对梯度 > 阈值（如 20）的像素做扩散——否则整张图泛灰
扩散算法怎么写才不卡顿？
高斯卷积太重，实时动画扛不住。实际可用轻量替代方案：
立即学习“前端免费学习笔记（深入）”；
- 对边缘像素，按欧氏距离
d做指数衰减：alpha *= Math.exp(-d / 8)（8 是经验常数，值越小晕染越局促） - 再用 3×3 均值滤波跑 1–2 轮（
[1,1,1,1,0,1,1,1,1]权重），比标准高斯快 5 倍且视觉差异极小 - 扩散后务必用
Math.min(255, Math.max(0, ...))截断，否则溢出导致墨色反转成亮斑 - 最后写回用
ctx.putImageData()，不要每帧都新建ImageData对象，复用同一实例
鼠标响应式喷溅怎么避免性能崩盘？
每次 mousemove 都全图重算扩散？那 60fps 是幻觉。真实做法是分层+限频：
- 建一个半透明“墨层”
canvas（globalAlpha = 0.15），只在鼠标位置画带径向渐变的圆斑（createRadialGradient） - 主画布每帧用
globalCompositeOperation = "lighter"叠加墨层，再用globalAlpha = 0.97自身衰减模拟墨迹挥发 - 监听
requestAnimationFrame而非mousemove，用throttle控制墨点生成频率 ≤ 30Hz - 超过 200 个墨点时，清空墨层并重置——否则 canvas 渲染管线会因 alpha 混合爆炸而掉帧
真正难的不是写扩散公式，而是控制墨色衰减的节奏感：太快像水渍，太慢像油漆；边缘要毛，但不能锯齿；浓淡过渡得有呼吸感。这些全靠反复调参，没捷径可抄。
