Rough Notation

Rough Notation 是一个跑在网页里的 JavaScript 库，用来给页面上的元素加手绘风格的标注。它借助 RoughJS 画出线条，所以下划线、方框、圈选看起来像用笔随手画的，而不是规整的 CSS 边框。常见用法是在产品介绍页、教程或演示里圈出重点，让读者的视线落到某个按钮或某段文字上。

主要功能

库提供八种标注样式：下划线、方框、圆圈、荧光笔高亮、删除线、打叉、括号，以及跨多行的行内标注。每种样式都能设置颜色、线宽和动画时长，也可以关掉动画，让标注直接出现。多个标注可以放进一个 annotation group，调用 show 时按顺序依次画出来，适合做分步讲解。

适合谁

面向写前端的人：在页面里引入脚本，选中目标元素，创建标注对象再调用 show 即可。不需要自己画 SVG 或调 CSS 动画，几行代码就能得到手绘效果。做教学页面、产品引导、文章重点标记的开发者都能用上。

费用与限制

代码开源，托管在 GitHub，文档也在同一个仓库里，页面提供赞助入口。压缩后体积约 3.8kb，对页面负担很小。它只负责画标注，不提供编辑界面，样式和位置都要在代码里配置；标注跟随元素定位，页面布局大幅变动时需要自己检查效果。