html5滤镜怎么实现水墨效果_html5水墨滤镜css写法【步骤】

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）是少数做了边缘检测+扩散卷积的，但文档缺失，需自己补全宣纸纹理混合逻辑。