如何用 HTML Canvas 模拟传统毛笔的压力变化与飞白效果？
笔触模型
传统毛笔笔触由三个阶段组成：
- 起笔：笔尖接触纸面，压力逐渐增大
- 行笔：稳定运笔，墨色均匀
- 收笔：提笔离纸，产生飞白效果
实现思路
通过贝塞尔曲线模拟笔迹轨迹，再根据压力函数调整线宽：
typescript
function pressure(t: number): number {
if (t < 0.2)
return t / 0.2 // 起笔
if (t > 0.8)
return ((1 - t) / 0.2) * 0.4 // 收笔
return 1 // 行笔
}飞白效果
飞白是中国书法中特有的效果，笔画中出现的枯笔留白。通过在笔触末端降低墨色浓度和增加随机间隙来模拟。
水墨之美，在于不完美。
古人论笔法
笔墨之道，贵在气韵生动。用笔当如锥画沙，如折钗股，如屋漏痕。
凡作画，气韵为先，笔墨次之。
—— 谢赫《古画品录》
墨分五色：焦、浓、重、淡、清。
五色之中，又有干湿之别，枯润之分。
注意事项
TIP
Canvas 的 globalCompositeOperation 设为 multiply 可以模拟墨色叠加效果，多次落笔处自然加深。
WARNING
飞白效果的随机间隙不宜过大，否则笔画会显得断裂而非自然的枯笔。建议间隙控制在笔宽的 10%–30% 之间。
DANGER
切勿在每一帧都重新绘制整个画布。水墨绘制是增量式的，应当使用离屏 Canvas 缓存已完成的笔画[1]。
INFO
本系列文章基于 @jobinjia/shuimo-core 库的实现经验整理。该库使用 Perlin 噪声[2]生成自然的笔触纹理。
总结
数字水墨不是对传统的替代，而是一种新的表达方式。代码与笔墨，终将殊途同归。