作品 & 能力 · 已上线

线条小狗画板：随手一笔，扭成一只狗

在画布上随便画一笔——波浪线、圈圈、写个字、甚至只点一下——松手后这一笔会自己扭成一只线条小狗。纯前端、零依赖、不联网，一个 HTML 文件就能跑。

• Canvas
• SVG
• 补间动画
• 零依赖
• 已上线

变形是怎么做到的

看起来是个玩具，但要让「任意一笔」平滑地变成「一只固定造型的狗」，中间有几步不做就会很丑。

1. 采集笔迹：pointerdown / move / up 记录一串点，间距小于 2.5px 的点直接丢掉，避免抖动噪点。
2. 算位置和大小：取笔迹包围盒的中心当小狗中心，包围盒对角线长度决定小狗大小（钳在 80px 到屏幕 75% 之间），再随机歪个 ±9°，这样每只都不太一样。
3. 准备目标点列：小狗造型来自一张 SVG 参考图，其中一条 path 是整只狗的身体轮廓。它是「描边转填充」的形状——沿笔画外侧走一圈再沿内侧绕回来的闭合环——用 getPointAtLength 均匀采样成 220 个点，按上一步的中心 / 缩放 / 旋转摆到画布上。
4. 对齐：笔迹也重采样成 220 个点。因为目标是个闭环，起点和绕行方向可以任选，所以穷举 220 个起点 × 2 个方向，挑跟笔迹总距离最小的那种。不做这一步，变形过程会绕成一团麻。
5. 逐点补间：用余弦缓动在 700ms 内把每个点从「你画的位置」推到「轮廓上的位置」，中途把首尾的封口线渐渐画出来。补间用的线宽 = 原图笔触宽度 × 缩放，所以线会自然把描边环的内外两侧填满。
6. 交叉淡入：补间结束时折线正好压在轮廓上，此时用 260ms 淡出折线、淡入完整的小狗（眼睛、鼻子嘴巴、前腿、尾巴动感线），同时炸一圈小火花。
7. 待机动画：每只狗有自己的相位，轻轻上下浮动，并且不定时眨眼——眨眼时跳过两个眼睛 path，改画两条弯线。

做成了可换造型的

造型和动画是分开的。想换成别的形状，只要把新图做成同样的「描边转填充」SVG、重新导出路径数据，再改三个常量：哪条 path 是主轮廓（变形目标）、哪几条是眼睛（眨眼要用）、原图笔触大致多粗。动画那部分一行都不用动。

为什么放这个

它不解决任何业务问题，但能说明一件事：交互和动效不是靠堆库堆出来的。这里没有任何第三方依赖，全部是 Canvas 原生 API + 一点几何。需要有记忆点的落地页、活动页、交互式产品演示时，这种能力比多会一个框架有用。