02 · 填充风格 + 抖动度旋钮

fillStyle 是 RoughJS 最出彩的部分 —— 不光画线,还能画"手绘纹理"

fillStyle 6 种风格

hachure(默认·斜线)

solid(实心)

zigzag(锯齿)

cross-hatch(交叉线)

dots(点阵)

dashed(虚线填充)

roughness 从 0 → 3(手绘感递增)

roughness: 0

接近机械 SVG

roughness: 1(默认)

正常手绘

roughness: 2

比较狂

roughness: 3

鬼画符

fillStyle 怎么传:{ fill: '#fcd5ce', fillStyle: 'hachure', fillWeight: 2, hachureGap: 8 }
- fillWeight:填充线粗细
- hachureGap:填充线间距(越大越稀疏)
- hachureAngle:填充线角度(默认 -41 度)

roughness 默认是 1,给箭头/细线图建议 1.5~2(更"画出来"的感觉)。