5分钟上手Rough.js：打造惊艳手绘风格Canvas与SVG图形的终极指南
项目地址: https://gitcode.com/gh_mirrors/ro/rough Rough.js是一款强大的JavaScript库，能够帮助开发者轻松创建具有手绘风格的图形。无论是Canvas还是SVG，Rough.js都能为你的项目增添独特的艺术感，让呆板的几何图形瞬间变得生动有趣。
🎨 什么是Rough.js？
Rough.js是一个轻量级的开源库，它通过模拟手绘笔触的不规则性，为标准几何图形添加自然的"粗糙感"。项目核心代码位于src/rough.ts，通过简单的API调用，就能让你的图形立即拥有手绘效果。
🚀 快速开始：5分钟安装与基础使用
安装步骤
- 克隆项目仓库：
git clone https://gitcode.com/gh_mirrors/ro/rough
- 安装依赖：
cd rough && npm install
- 构建项目：
npm run build
基础示例：创建手绘矩形
使用Rough.js创建一个简单的手绘风格矩形非常简单：
// 导入Rough.js库
import rough from 'roughjs';
// 获取Canvas元素
const canvas = document.querySelector('canvas');
const rc = rough.canvas(canvas);
// 绘制手绘风格矩形
rc.rectangle(10, 10, 200, 100, {
roughness: 2,
fill: 'skyblue',
fillStyle: 'hachure'
});
✏️ 核心功能解析
Canvas与SVG双支持
Rough.js同时支持Canvas和SVG两种绘图方式，满足不同场景需求：
- Canvas渲染：适合动态交互和复杂图形，核心实现见src/canvas.ts
- SVG渲染：适合需要矢量输出的场景，实现代码位于src/svg.ts
丰富的图形类型
Rough.js支持多种基本图形的手绘风格绘制：
- 直线、曲线和路径
- 矩形和圆角矩形
- 圆形和椭圆
- 多边形和星形
- 自由绘制的路径
高度可定制的手绘效果
通过调整参数，可以创建各种风格的手绘效果：
roughness：控制线条的粗糙程度（0-3）bowing：控制线条弯曲程度（0-10）fill：填充颜色fillStyle：填充样式（solid, hachure, cross-hatch, zigzag等）
🖌️ 高级应用：创建美国地图示例
Rough.js不仅能绘制简单图形，还能创建复杂的手绘风格可视化作品。项目中的visual-tests/canvas/map.html展示了如何结合D3.js和Rough.js创建手绘风格的美国地图：
// 初始化Rough.js
const rc = rough.canvas(canvas, {
options: {
simplification: 0.1,
roughness: 0.65
}
});
// 使用D3.js加载地图数据并绘制
d3.json("./us.json", (error, us) => {
let topo = topojson.feature(us, us.objects.states).features;
for (let feature of topo) {
rc.path(path(feature), {
fill: randomColor(),
fillStyle: randomStyle(),
hachureAngle: randomAngle()
});
}
});
🎭 多种填充风格展示
Rough.js提供了多种填充风格，位于src/fillers/目录下，包括：
- 虚线填充（dashed-filler.ts）
- 点填充（dot-filler.ts）
- 交叉填充（hachure-filler.ts）
- 锯齿形填充（zigzag-filler.ts）
你可以通过设置fillStyle属性来选择不同的填充效果，为你的手绘图形增添更多变化。
📝 总结与下一步
Rough.js为Web开发者提供了一种简单而强大的方式，为图形添加独特的手绘风格。无论是数据可视化、教育应用还是游戏开发，Rough.js都能为你的项目带来耳目一新的视觉体验。
要深入学习Rough.js，可以从以下方面入手：
- 探索src/geometry.ts了解图形生成算法
- 研究src/renderer.ts学习渲染实现细节
- 尝试修改visual-tests/目录下的示例，体验不同参数效果
立即开始使用Rough.js，为你的Web项目注入创意与艺术气息吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
