hanzi-writer —— 开源汉字笔画动画 JavaScript 库

项目简介

hanzi-writer 是一个基于 SVG 渲染的开源汉字笔画顺序动画 JavaScript 库。它为中文教育类应用和网站提供了轻量、无依赖的汉字笔画演示与练习功能，是构建汉字学习工具的绝佳底层组件。

项目由 Chanind 开发并维护，经过十余年的迭代，已成为该领域最成熟的开源方案之一。

配套数据包 hanzi-writer-data 基于 makemeahanzi 项目提取的汉字笔画数据，提供了数千个常用汉字的笔顺信息。

hanzi-writer 不依赖任何第三方 JavaScript 框架，可直接嵌入任何前端项目。

npm install hanzi-writer

<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.7.3/dist/hanzi-writer.min.js"></script>

const writer = HanziWriter.create('target-div', '永', {
  width: 400,
  height: 400,
  padding: 5,
});
writer.animateCharacter();

只需几行代码即可在指定 DOM 容器中渲染汉字并播放笔画动画。配套的 hanzi-writer-data 数据包会自动加载汉字的笔画信息。

项目	类型	License	优势	劣势
hanzi-writer	开源	MIT	免费、轻量、无依赖、可定制	需自行集成
Skritter	商业	闭源	完整学习体系、Spaced Repetition	付费、不对外集成
Chinese Writer	商业	闭源	游戏化学习体验	付费、功能固定

Skritter 和 Chinese Writer 都是成熟的商业产品，但作为可嵌入的开源组件，hanzi-writer 在灵活性和成本方面具有明显优势。

随着中文学习需求的全球化增长，hanzi-writer 作为该领域最成熟的开源方案，未来可探索的方向包括：集成 AI 手写识别以提供更智能的笔画纠错、支持更多字体风格的笔画渲染、以及为儿童教育场景优化的游戏化交互模式。其 MIT 许可也为商业集成提供了极大的便利。

hanzi-writer 拥有活跃的社区生态。其配套的 hanzi-writer-data 数据包已经覆盖了数千常用汉字的笔画信息，社区也贡献了多种语言的集成示例，包括 React、Vue、Angular 等前端框架的封装组件。

对于教育类产品的开发者来说，hanzi-writer 不仅是一个工具库，更是一个可扩展的学习平台底座。结合 TTS（文字转语音）和 AI 手写识别，可以构建完整的『听-写-评』学习闭环。