3分钟看懂好看的手绘图片源码手写实现核心
官方文档太长抓不住重点，这是很多开发者在看 Canvas 或 SVG 渲染引擎时的真实写照。面对成千上万行代码，我们往往迷失在 API 调用的细节里，忽略了底层如何把数据变成“好看的手绘图片”。今天不聊虚的，直接拆解核心逻辑，带你通过手写实现一个极简版的手绘风格渲染器，彻底搞懂背后的设计思想。
入口定位：从数据到像素的路径
要理解手绘图片的生成，得先搞清楚数据流。通常，一个手绘风格的效果由三部分组成：路径数据（Path Data）、样式参数（Stroke Style）和扰动算法（Jitter Algorithm）。
在主流浏览器引擎中，Canvas 的 2DContext 是核心入口。当你调用 ctx.lineTo() 时，浏览器并没有立刻画线，而是将这些坐标点存入一个路径缓冲区。真正的绘制发生在 ctx.stroke() 被调用时。此时，引擎会根据当前的 lineCap、lineJoin 和 strokeStyle，将路径光栅化（Rasterization）为像素。
手绘感的核心秘密在于“不完美”。
计算机生成的线条通常是数学上完美的贝塞尔曲线或直线，但在视觉上显得生硬、机械。好看的手绘图片之所以迷人，是因为它模拟了人类手抖、墨迹扩散、笔触压力的变化。因此，源码解析的重点不在于如何画一条直线，而在于如何有目的地破坏这条直线的完美性。
核心片段：抖动算法的源码剖析
我们来看一段基于 Canvas 2D API 的核心渲染逻辑。这段代码展示了如何将一条普通的线段转化为带有手绘质感的线条。为了便于阅读，我们剥离了复杂的上下文状态管理，只保留最核心的几何计算部分。
// 核心函数：绘制带抖动效果的手绘线条
function drawHandDrawnLine(ctx, x1, y1, x2, y2, options = {}) {
const {
jitter = 1.5, // 抖动幅度，控制线条的“抖动感”
segments = 10, // 将原线段分割成的段数，段数越多细节越丰富
color = '#333' // 线条颜色
} = options;
// 1. 设置线条样式
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // 圆头，模拟笔触末端
ctx.lineJoin = 'round'; // 圆角，模拟转弯处的自然过渡
// 2. 计算线段向量与法向量
const dx = x2 - x1;
const dy = y2 - y1;
const length = Math.sqrt(dx * dx + dy * dy);
// 单位向量
const ux = dx / length;
const uy = dy / length;
// 法向量（垂直于线段方向），用于偏移点
const nx = -uy;
const ny = ux;
// 3. 移动起点
ctx.moveTo(x1, y1);
// 4. 生成中间抖动点
for (let i = 1; i segments; i++) {
const t = i / segments; // 当前进度 (0 到 1 之间)
// 基础位置
let baseX = x1 + dx * t;
let baseY = y1 + dy * t;
// 核心逻辑：添加随机抖动
// 使用 Math.sin 产生周期性波动，再叠加 Math.random 产生随机噪声
// 这种混合方式比纯随机更自然，避免了“雪花”般的杂乱
const wave = Math.sin(t * Math.PI * 2 * 3) * jitter * 0.5;
const noise = (Math.random() - 0.5) * jitter;
const offset = wave + noise;
// 沿法向量方向偏移
const finalX = baseX + nx * offset;
const finalY = baseY + ny * offset;
ctx.lineTo(finalX, finalY);
}
// 5. 结束于终点（终点通常不抖动，保持锚定感）
ctx.lineTo(x2, y2);
ctx.stroke();
}
逐行解析关键点：
lineCap 与 lineJoin 的设置：这是很多人容易忽略的细节。默认的 butt 和 miter 会产生锋利的切角，非常像机器打印。改为 round 后，线条的端点和连接处变得柔和，这是形成“墨水感”的基础。
法向量计算：nx = -uy 和 ny = ux 是标准的二维向量旋转90度公式。我们要让线条左右摆动，而不是前后拉伸，所以必须沿着垂直于行进方向（法线）进行偏移。
抖动算法的组合：注意 wave 和 noise 的结合。纯随机数（Noise）会让线条看起来像噪点，纯正弦波（Wave）会像波浪。两者叠加，既有规律性的弯曲，又有不可预测的细节，这正是人手绘写的特征。
终点锚定：循环中 i 从 1 到 segments-1，最后一步直接 lineTo(x2, y2)。如果终点也抖动，整个图形会显得不稳定。保持起止点精确，中间部分自由，符合视觉心理学。
设计思想：确定性随机与性能权衡
你可能会问：为什么不用 Math.random() 生成每一帧的抖动？因为那样线条会“跳”，像果冻一样晃动。好看的手绘图片必须是静态的。
这就引出了**确定性随机（Deterministic Randomness）**的概念。在更高级的开源库（如 Rough.js）中，抖动不是每次渲染都重新计算，而是基于线段 ID 或哈希值生成的伪随机数。这意味着，只要输入坐标不变，生成的抖动形状就永远一致。
性能陷阱：
在移动端或大量元素场景下，频繁调用 Math.random() 和复杂的三角函数计算会消耗大量 CPU 资源。MDN Web Docs 指出，Canvas 2D 的渲染性能与绘制命令的数量成正比。如果你绘制 1000 条手绘线，每条线分割成 10 段，那就是 10000 次 lineTo 调用，外加 10000 次随机数生成。
优化策略：
预烘焙（Pre-baking）：将手绘线条的路径数据计算好，存储为 Path2D 对象。后续绘制时直接填充，避免重复计算。
离屏 Canvas：将静态的手绘背景绘制到 OffscreenCanvas，然后作为纹理贴到主画布上。
分段粒度自适应：短线条减少 segments，长线条增加 segments。过细的分段不仅没必要，还浪费性能。
手写简化版：构建你的第一个手绘引擎
为了让你真正掌握这套逻辑，这里提供一个极简的、可复用的工具类。它封装了上述逻辑，并增加了多线条绘制和填充功能。
class HandDrawnRenderer {
constructor(ctx) {
this.ctx = ctx;
this.seed = Math.random() * 1000; // 全局种子，确保同一次渲染一致性
}
// 简单的伪随机数生成器，保证可复现性
pseudoRandom(index) {
let x = Math.sin(this.seed + index) * 10000;
return x - Math.floor(x);
}
// 绘制手绘矩形
drawRect(x, y, w, h, options = {}) {
const { stroke = '#000', fill = 'none', roughness = 1 } = options;
this.ctx.beginPath();
// 定义四个角点，按顺时针
const points = [
[x, y], [x + w, y], [x + w, y + h], [x, y + h]
];
// 遍历每条边
for (let i = 0; i 4; i++) {
const p1 = points[i];
const p2 = points[(i + 1) % 4];
this._drawJitteredLine(p1[0], p1[1], p2[0], p2[1], i, roughness);
}
this.ctx.strokeStyle = stroke;
this.ctx.stroke();
if (fill !== 'none') {
// 注意：手绘填充通常使用半透明叠加或特殊的纹理，
// 这里简化为普通填充，实际项目中应使用 pattern
this.ctx.fillStyle = fill;
this.ctx.fill();
}
}
// 内部方法：绘制单条抖动线
_drawJitteredLine(x1, y1, x2, y2, edgeIndex, roughness) {
const segments = 5; // 简化版使用较少的段数
const dx = x2 - x1;
const dy = y2 - y1;
const len = Math.sqrt(dx*dx + dy*dy);
if (len === 0) return;
const ux = dx / len;
const uy = dy / len;
const nx = -uy;
const ny = ux;
this.ctx.moveTo(x1, y1);
for (let i = 1; i segments; i++) {
const t = i / segments;
const baseX = x1 + dx * t;
const baseY = y1 + dy * t;
// 基于 edgeIndex 和 i 生成确定性随机偏移
const offset = (this.pseudoRandom(edgeIndex * 100 + i) - 0.5) * 2 * roughness;
this.ctx.lineTo(baseX + nx * offset, baseY + ny * offset);
}
this.ctx.lineTo(x2, y2);
}
}
// 使用示例
// const canvas = document.getElementById('myCanvas');
// const ctx = canvas.getContext('2d');
// const renderer = new HandDrawnRenderer(ctx);
// renderer.drawRect(50, 50, 200, 100, { stroke: 'red', roughness: 2 });
这个简化版虽然去掉了复杂的笔触模拟，但核心逻辑——法向量偏移和确定性随机——完全保留。你可以在此基础上扩展，比如增加 strokeWidth 的随机变化，模拟墨水渗透。
应用场景：不止是装饰
很多人认为手绘风格只用于 UI 装饰，那是大错特错。在数据可视化和教育领域，手绘风格（Rough.js 风格）有着不可替代的价值。
降低认知负荷：在复杂的架构图或流程图中，完美的矢量线条会分散注意力。手绘风格的“草图感”能让用户更关注内容逻辑，而不是图形的精致度。
亲和力与信任感：在用户引导（Onboarding）或错误提示界面，手绘图标比冷冰冰的 UI 图标更具人情味，能降低用户的焦虑感。
教育演示：在数学或物理教学中，模拟粉笔在黑板上的书写轨迹，能增强沉浸感。
避坑指南：
不要过度抖动：roughness 参数过大，线条会变得无法辨认。一般建议抖动幅度不超过线段长度的 1%-2%。
注意 DPI 适配：在高 DPI 屏幕上，如果抖动幅度固定为像素值，效果会显得过细。应根据 window.devicePixelRatio 动态调整抖动参数。
色彩心理学：手绘线条通常建议配合低饱和度的色彩。高饱和度的红色手绘线会显得刺眼且廉价，深灰色或暖棕色更能体现质感。
技术永远服务于体验。手写实现这套逻辑，不仅是为了炫技，更是为了理解浏览器如何将抽象数据转化为视觉语言。当你不再依赖黑盒库，而是能自己调整每一个抖动参数时，你对“好看”的定义才有了真正的掌控权。
你公司项目里是怎么处理的？是直接用 Rough.js，还是自己封装了一套 Canvas 工具库？欢迎在评论区分享你的踩坑经验，咱们一起聊聊如何平衡性能与视觉效果。 
长河君 · 2026/9/22 11:54:00 · 阅读 1.2k 3分钟看懂好看的手绘图片源码手写实现核心
3分钟看懂好看的手绘图片源码手写实现核心
官方文档太长抓不住重点，这是很多开发者在看 Canvas 或 SVG 渲染引擎时的真实写照。面对成千上万行代码，我们往往迷失在 API 调用的细节里，忽略了底层如何把数据变成“好看的手绘图片”。今天不聊虚的，直接拆解核心逻辑，带你通过手写实现一个极简版的手绘风格渲染器，彻底搞懂背后的设计思想。
入口定位：从数据到像素的路径
要理解手绘图片的生成，得先搞清楚数据流。通常，一个手绘风格的效果由三部分组成：路径数据（Path Data）、样式参数（Stroke Style）和扰动算法（Jitter Algorithm）。
在主流浏览器引擎中，Canvas 的 2DContext 是核心入口。当你调用 ctx.lineTo() 时，浏览器并没有立刻画线，而是将这些坐标点存入一个路径缓冲区。真正的绘制发生在 ctx.stroke() 被调用时。此时，引擎会根据当前的 lineCap、lineJoin 和 strokeStyle，将路径光栅化（Rasterization）为像素。
手绘感的核心秘密在于“不完美”。
计算机生成的线条通常是数学上完美的贝塞尔曲线或直线，但在视觉上显得生硬、机械。好看的手绘图片之所以迷人，是因为它模拟了人类手抖、墨迹扩散、笔触压力的变化。因此，源码解析的重点不在于如何画一条直线，而在于如何有目的地破坏这条直线的完美性。
核心片段：抖动算法的源码剖析
我们来看一段基于 Canvas 2D API 的核心渲染逻辑。这段代码展示了如何将一条普通的线段转化为带有手绘质感的线条。为了便于阅读，我们剥离了复杂的上下文状态管理，只保留最核心的几何计算部分。
// 核心函数：绘制带抖动效果的手绘线条
function drawHandDrawnLine(ctx, x1, y1, x2, y2, options = {}) {
const {
jitter = 1.5, // 抖动幅度，控制线条的“抖动感”
segments = 10, // 将原线段分割成的段数，段数越多细节越丰富
color = '#333' // 线条颜色
} = options;
// 1. 设置线条样式
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // 圆头，模拟笔触末端
ctx.lineJoin = 'round'; // 圆角，模拟转弯处的自然过渡
// 2. 计算线段向量与法向量
const dx = x2 - x1;
const dy = y2 - y1;
const length = Math.sqrt(dx * dx + dy * dy);
// 单位向量
const ux = dx / length;
const uy = dy / length;
// 法向量（垂直于线段方向），用于偏移点
const nx = -uy;
const ny = ux;
// 3. 移动起点
ctx.moveTo(x1, y1);
// 4. 生成中间抖动点
for (let i = 1; i segments; i++) {
const t = i / segments; // 当前进度 (0 到 1 之间)
// 基础位置
let baseX = x1 + dx * t;
let baseY = y1 + dy * t;
// 核心逻辑：添加随机抖动
// 使用 Math.sin 产生周期性波动，再叠加 Math.random 产生随机噪声
// 这种混合方式比纯随机更自然，避免了“雪花”般的杂乱
const wave = Math.sin(t * Math.PI * 2 * 3) * jitter * 0.5;
const noise = (Math.random() - 0.5) * jitter;
const offset = wave + noise;
// 沿法向量方向偏移
const finalX = baseX + nx * offset;
const finalY = baseY + ny * offset;
ctx.lineTo(finalX, finalY);
}
// 5. 结束于终点（终点通常不抖动，保持锚定感）
ctx.lineTo(x2, y2);
ctx.stroke();
}
逐行解析关键点：
lineCap 与 lineJoin 的设置：这是很多人容易忽略的细节。默认的 butt 和 miter 会产生锋利的切角，非常像机器打印。改为 round 后，线条的端点和连接处变得柔和，这是形成“墨水感”的基础。
法向量计算：nx = -uy 和 ny = ux 是标准的二维向量旋转90度公式。我们要让线条左右摆动，而不是前后拉伸，所以必须沿着垂直于行进方向（法线）进行偏移。
抖动算法的组合：注意 wave 和 noise 的结合。纯随机数（Noise）会让线条看起来像噪点，纯正弦波（Wave）会像波浪。两者叠加，既有规律性的弯曲，又有不可预测的细节，这正是人手绘写的特征。
终点锚定：循环中 i 从 1 到 segments-1，最后一步直接 lineTo(x2, y2)。如果终点也抖动，整个图形会显得不稳定。保持起止点精确，中间部分自由，符合视觉心理学。
设计思想：确定性随机与性能权衡
你可能会问：为什么不用 Math.random() 生成每一帧的抖动？因为那样线条会“跳”，像果冻一样晃动。好看的手绘图片必须是静态的。
这就引出了**确定性随机（Deterministic Randomness）**的概念。在更高级的开源库（如 Rough.js）中，抖动不是每次渲染都重新计算，而是基于线段 ID 或哈希值生成的伪随机数。这意味着，只要输入坐标不变，生成的抖动形状就永远一致。
性能陷阱：
在移动端或大量元素场景下，频繁调用 Math.random() 和复杂的三角函数计算会消耗大量 CPU 资源。MDN Web Docs 指出，Canvas 2D 的渲染性能与绘制命令的数量成正比。如果你绘制 1000 条手绘线，每条线分割成 10 段，那就是 10000 次 lineTo 调用，外加 10000 次随机数生成。
优化策略：
预烘焙（Pre-baking）：将手绘线条的路径数据计算好，存储为 Path2D 对象。后续绘制时直接填充，避免重复计算。
离屏 Canvas：将静态的手绘背景绘制到 OffscreenCanvas，然后作为纹理贴到主画布上。
分段粒度自适应：短线条减少 segments，长线条增加 segments。过细的分段不仅没必要，还浪费性能。
手写简化版：构建你的第一个手绘引擎
为了让你真正掌握这套逻辑，这里提供一个极简的、可复用的工具类。它封装了上述逻辑，并增加了多线条绘制和填充功能。
class HandDrawnRenderer {
constructor(ctx) {
this.ctx = ctx;
this.seed = Math.random() * 1000; // 全局种子，确保同一次渲染一致性
}
// 简单的伪随机数生成器，保证可复现性
pseudoRandom(index) {
let x = Math.sin(this.seed + index) * 10000;
return x - Math.floor(x);
}
// 绘制手绘矩形
drawRect(x, y, w, h, options = {}) {
const { stroke = '#000', fill = 'none', roughness = 1 } = options;
this.ctx.beginPath();
// 定义四个角点，按顺时针
const points = [
[x, y], [x + w, y], [x + w, y + h], [x, y + h]
];
// 遍历每条边
for (let i = 0; i 4; i++) {
const p1 = points[i];
const p2 = points[(i + 1) % 4];
this._drawJitteredLine(p1[0], p1[1], p2[0], p2[1], i, roughness);
}
this.ctx.strokeStyle = stroke;
this.ctx.stroke();
if (fill !== 'none') {
// 注意：手绘填充通常使用半透明叠加或特殊的纹理，
// 这里简化为普通填充，实际项目中应使用 pattern
this.ctx.fillStyle = fill;
this.ctx.fill();
}
}
// 内部方法：绘制单条抖动线
_drawJitteredLine(x1, y1, x2, y2, edgeIndex, roughness) {
const segments = 5; // 简化版使用较少的段数
const dx = x2 - x1;
const dy = y2 - y1;
const len = Math.sqrt(dx*dx + dy*dy);
if (len === 0) return;
const ux = dx / len;
const uy = dy / len;
const nx = -uy;
const ny = ux;
this.ctx.moveTo(x1, y1);
for (let i = 1; i segments; i++) {
const t = i / segments;
const baseX = x1 + dx * t;
const baseY = y1 + dy * t;
// 基于 edgeIndex 和 i 生成确定性随机偏移
const offset = (this.pseudoRandom(edgeIndex * 100 + i) - 0.5) * 2 * roughness;
this.ctx.lineTo(baseX + nx * offset, baseY + ny * offset);
}
this.ctx.lineTo(x2, y2);
}
}
// 使用示例
// const canvas = document.getElementById('myCanvas');
// const ctx = canvas.getContext('2d');
// const renderer = new HandDrawnRenderer(ctx);
// renderer.drawRect(50, 50, 200, 100, { stroke: 'red', roughness: 2 });
这个简化版虽然去掉了复杂的笔触模拟，但核心逻辑——法向量偏移和确定性随机——完全保留。你可以在此基础上扩展，比如增加 strokeWidth 的随机变化，模拟墨水渗透。
应用场景：不止是装饰
很多人认为手绘风格只用于 UI 装饰，那是大错特错。在数据可视化和教育领域，手绘风格（Rough.js 风格）有着不可替代的价值。
降低认知负荷：在复杂的架构图或流程图中，完美的矢量线条会分散注意力。手绘风格的“草图感”能让用户更关注内容逻辑，而不是图形的精致度。
亲和力与信任感：在用户引导（Onboarding）或错误提示界面，手绘图标比冷冰冰的 UI 图标更具人情味，能降低用户的焦虑感。
教育演示：在数学或物理教学中，模拟粉笔在黑板上的书写轨迹，能增强沉浸感。
避坑指南：
不要过度抖动：roughness 参数过大，线条会变得无法辨认。一般建议抖动幅度不超过线段长度的 1%-2%。
注意 DPI 适配：在高 DPI 屏幕上，如果抖动幅度固定为像素值，效果会显得过细。应根据 window.devicePixelRatio 动态调整抖动参数。
色彩心理学：手绘线条通常建议配合低饱和度的色彩。高饱和度的红色手绘线会显得刺眼且廉价，深灰色或暖棕色更能体现质感。
技术永远服务于体验。手写实现这套逻辑，不仅是为了炫技，更是为了理解浏览器如何将抽象数据转化为视觉语言。当你不再依赖黑盒库，而是能自己调整每一个抖动参数时，你对“好看”的定义才有了真正的掌控权。
你公司项目里是怎么处理的？是直接用 Rough.js，还是自己封装了一套 Canvas 工具库？欢迎在评论区分享你的踩坑经验，咱们一起聊聊如何平衡性能与视觉效果。