Canvas 2D 是目前 HTML5 中唯一可控、可复现真实水墨质感的方式，需通过 getImageData 获取像素、Sobel 边缘检测、距离衰减与高斯扩散实现晕染飞白；CSS 滤镜仅能辅助营造氛围，WebGL 方案适合高性能动态渲染。
Canvas 2D 上用 getImageData + 像素计算模拟水墨效果
纯 CSS 滤镜（如 filter: contrast()、blur()）无法实现真正水墨的晕染、飞白、浓淡渐变等特性。必须回到 Canvas 2D 的像素级控制——这是目前 HTML5 中唯一可控、可复现水墨质感的方式。
核心思路是：读取图像原始像素 → 对灰度、边缘、扩散区域做分层处理 → 模拟墨迹在宣纸上的渗透与晕开。
- 先用
ctx.drawImage()把图片画到离屏 canvas 上 - 调用
ctx.getImageData(0, 0, width, height)获取Uint8ClampedArray像素数组 - 对每个像素计算局部梯度（Sobel 算子），识别“墨线”边缘
- 对边缘附近像素按距离衰减墨色，并叠加轻微高斯扩散（用简单 3×3 卷积近似）
- 最后把处理后的像素写回
putImageData()
CSS filter 能做的只是“类水墨”氛围烘托
CSS 滤镜不能生成新像素，也不能感知结构，所以只能辅助营造近似观感，适合静态 banner 或轻量装饰。
常见组合示例（作用有限但加载快）：
立即学习“前端免费学习笔记（深入）”；
img {
filter:
grayscale(80%)
contrast(1.6)
brightness(0.9)
blur(0.4px)
drop-shadow(0 0 2px rgba(0,0,0,0.15));
}
-
grayscale()是基础，水墨本质是单色层次 -
contrast()拉开浓淡，但过大会丢失中间灰阶 -
blur()值必须极小（≤0.5px），否则变油画而非水墨 -
drop-shadow()可模拟少量晕染，但方向和衰减不可控
WebGL 方案（Three.js + 自定义 shader）适合高性能动态水墨
如果需要实时笔触、墨量控制、纸纹叠加或动画渲染，Canvas 2D 会很快卡住。此时应切到 WebGL，用 fragment shader 实现物理启发的扩散模型。
- Three.js 中用
ShaderMaterial加载自定义 GLSL - 关键变量包括：
u_inkAmount（墨量）、u_dampening（纸吸水性）、u_paperTexture（宣纸噪点图） - shader 内用多步迭代模拟墨水在纤维间的毛细扩散（非真实流体，而是带方向的指数衰减采样）
- 必须配合 FBO（帧缓冲）做多次渲染循环，否则无法体现“层层晕染”
注意：这种写法无法降级到 Canvas 2D，且移动端兼容性需测试 OES_texture_float 扩展是否可用。
直接套用现成库要小心“假水墨”陷阱
npm 上搜 ink-effect、sumi-e 多数只是 CSS 滤镜叠加工具函数，或用 SVG
- 检查源码是否含
getImageData或 WebGL shader，没有就不是真水墨 - 观察 demo 在不同分辨率下是否失真：Canvas 2D 方案缩放后像素会糊，WebGL 方案则保持清晰
- 留意是否支持透明通道：真实水墨有“飞白”，即部分区域完全透底，这要求 alpha 通道参与计算
真正可用的开源参考极少，canvas-ink（GitHub）是少数做了边缘检测+扩散卷积的，但文档缺失，需自己补全宣纸纹理混合逻辑。
