只需几行 JavaScript 代码，网页瞬间高大上了！

小咪咪 2022-12-13 12:59 113阅读 0赞

最近在网上闲逛，发现一个特别好玩的 JavaScript 库，叫 RoughNotation。干嘛用的呢？就是在网页上给文字加标注，比如下划线、方框、高亮文字背景等，不过是手写风格的！截图给大家感受下：

![手绘风格的标注][format_png] 手绘风格的标注

怎么样？是不是感觉网页瞬间就生动了？是不是有种手捧纸质书，用彩笔在纸上做笔记的感觉？文艺 bigger 范儿就出来了！

它支持多种标注形式，除了前面提到的，还有圆圈、叉、删除线等，还能够自定义样式（颜色和粗细等），并且支持动画效果。

使用也很简单，可以通过`npm`安装：

npm install --save rough-notation

或者直接通过 ES 模块引入（浏览器支持才行）：

还可以直接引入 IIFE 格式的脚本，这样就会得到一个全局变量`RoughNotation`：

用法也很简单，找到需要标注的 DOM 元素，调用 API 就行：

import { annotate } from 'rough-notation';
    
    const e = document.querySelector('#myElement');
    const annotation = annotate(e, { type: 'underline' });
    annotation.show();

更多用法可参考官方文档和 Github 仓库。

作为技术人，其实我们更关心的是它怎么实现的。RoughNotation 基于 RoughJS 这个库开发，后者就是一个用手绘风格绘图的库。打开 Chrome 控制台查看下元素，发现这些标注是通过 SVG 绘制出来的。SVG 使用了绝对定位，根据目标 DOM 元素位置计算坐标。

![image.png][] svg 绘图

好了，就简单介绍到这。有兴趣的可以去安装使用下，分分钟让你的页面变得个性十足，快分享给你的小伙伴们吧！

**想加群交流前端技术的看这里：**

[大佬云集的前端群，不进来看看？][Link 1]

在前端学习的这条道路上，我么总是会遇到这样或者那样的问题，如果自己蒙头解决或许要花很多时间，如果这个时候你的身边有很多前端大佬，有很多前端小伙伴聚集的地方，就可能遇到过同样的问题，给出解决方案，这样就简单方便多了，困扰自己的问题也能够很快解决，头发也能少掉几根。

为了让你每天学会一个技术，少掉两根头发，多认识一个女生，黔在在创建了一个「前端迷 交流群」，更好的跟大家一起学习交流，大家一起进步，一起成为更好的自己。

有兴趣入群的同学，可长按扫描下方二维码，或添加微信号「**xiao\_mi\_mei6**」

**一定要备注：****城市+昵称+技术方向**，根据格式备注，可更快被通过且邀请进群

![format_png 1][]

[format_png]: /images/20221123/47f88d2b90d946059cb4e57e9a1bc700.png
[image.png]: /images/20221123/0337951b0ccb4b8fa8293f5295d1444a.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5OTM4MDgwOQ%3D%3D&chksm=b337e39684406a8034b5bf7abb1e88807e53a9ac8701e3404376119df32be1f72014ea60e004&idx=2&mid=2449412528&scene=21&sn=7fdab6a34991b6eecbef1bf32f010703#wechat_redirect
[format_png 1]: /images/20221123/3ac149dd3e5c44ac901756a35fd617ac.png