跳到正文
网页珍奇柜Web Curio

汉字笔顺书写器

Hanzi Writer，David Chanin，2014 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

原作直展：这是 David Chanin 的原始作品，按 MIT（笔画数据来自 hanzi-writer-data / Make Me a Hanzi，Arphic Public License） 许可证收录（版本 7cff0a3）。库文件是 npm 发布的 hanzi-writer 3.7.3 原版；展示页由本柜编写，内置 40 个常用字的笔画数据，不再从 CDN 加载。可看笔顺动画、循环演示，或点“描红测验”按笔顺手写，写错会提示。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步每个字的数据包含每一笔的轮廓路径和一条“中线”（笔画骨架）
  2. 第 2 步动画时用 clipPath 把笔画轮廓裁剪到沿中线逐渐延伸的粗描边上
  3. 第 3 步stroke-dasharray/dashoffset 驱动骨架描边的生长，产生书写感
  4. 第 4 步测验模式把用户手绘路径与中线做形状匹配，判断笔画是否正确

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

For each glyph, load per-stroke outline paths and a centre-line polyline (median) for each stroke. Draw the outline as a clipPath and inside it draw a very thick polyline along the median whose stroke-dasharray equals its length; animate stroke-dashoffset from length to zero so ink appears to flow in the writing direction. Chain strokes with small pauses. For quiz mode, record the pointer path, resample it, and compare it to the expected median by direction and distance, then flash the correct stroke when the user fails.

定制成完整的实现提示词

档案

能不能拿来用

原作以 MIT (code); character stroke data under the Arphic Public License via Make Me a Hanzi 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Opened https://hanziwriter.org (200, title 'Hanzi Writer - Chinese Character Stroke Order Animations and Practice Quizzes'); repo chanind/hanzi-writer exists, licence MIT via GitHub API; README states the data licence (Arphic Public License).