- 省流： 代码示例与效果地址
- 官网地址：(RoughNotation)
- 效果图：
不知道有没有人和我一样特别喜欢手绘风，作为一名前端，通过了解我找到了Rough Notation这个js库，非常轻量并且颜值在线。
无论是模拟类似笔记软件上的笔记效果（bushi）还是为网页添加一种手绘的活力都很给力。
下面是一个以诗歌内容的效果展示：
《炸裂志》-陈年喜
官网效果
我们直接创建一个简单的效果:
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8">
> <title>Roughnotation Box for Two Words Example</title>
> </head>
> <body>
> <p id="targetText">以下是box效果展示</p>
> <span id="twoWords">box</span>
> <script type="module">
> // 从指定的URL引入annotate函数
> import { annotate } from 'https://unpkg.com/rough-notation?module';
> document.addEventListener('DOMContentLoaded', () => {
> const targetElement = document.getElementById('twoWords');
> if (targetElement) {
> // 创建标注实例并配置相关属性为box效果相关参数
> const notation = annotate(targetElement, {
> type: 'box',
> color: 'red',
> strokeWidth: 2,
> iterations: 2,
> padding: 5,
> borderRadius: 3
> });
> // 显示标注效果
> notation.show();
> }
> });
> </script>
> </body>
> </html>
代码效果
具体调整动画风格参数请移步官网（开头地址），不仅限于对文字的修饰，通过不同手绘风格的组合，应该能实现更多好看的效果。
