JavaScript工具站

Chinese Stroke Order Generator — JavaScript 工具站模板

作者 Yark-yao

用 Hanzi Writer、Puppeteer 与 FFmpeg 生成汉字笔顺 GIF 的开源命令行工具，附带真实在线演示。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

真实在线演示：HanziStroke.com 提供笔顺、释义与 HSK 信息，另有 Worksheet Maker 可生成 PDF 练习纸

命令行驱动：单字生成或批量处理，支持自定义 JSON 输入文件与并发数

离线优先：Hanzi Writer 与笔画数据均从本地加载，渲染时屏蔽外部网络请求

原子写入：FFmpeg 先写临时文件再发布，避免编码失败留下损坏的 GIF

完整测试：包含语法检查、单元测试、CLI 测试与真实离线 GIF 冒烟测试

MIT 许可：原始代码开源，笔画数据遵循 Arphic Public License

模板详细介绍

Chinese Stroke Order Generator 是一个面向汉字教学与学习场景的开源工具，核心能力是把单个汉字或批量字符渲染成笔顺动画 GIF。它没有把界面做成花哨的仪表盘，而是以命令行和 Node.js 脚本为主，配合一个真实可访问的在线演示站 HanziStroke.com，让你能直接看到生成效果，也方便作为表单交互或工具站的起点。

项目依赖 Hanzi Writer 提供笔画数据，Puppeteer 控制无头浏览器绘制，FFmpeg 负责把帧序列合成 GIF。默认输出 500×500 画布、540×540 视口、15 FPS、10 秒时长的动画，文件写入 output 目录。批量生成支持简单数组或旧版记录格式，重复字符会自动去重，且每个条目在启动 Chrome 前都会校验，避免无效输入浪费资源。

值得留意的是，生成过程默认完全离线，Hanzi Writer 和笔画数据都从本地加载，渲染时会主动屏蔽 HTTP/HTTPS 请求，防止意外访问 CDN。Chromium 沙箱默认开启，只有在可信容器中才建议通过 PUPPETEER_NO_SANDBOX 显式关闭。如果你打算直接部署到生产环境，需要自行确认 Node.js 22.12+、pnpm 和 FFmpeg 的安装，并检查输出目录的写入权限。

可直接运行在线工具表单交互

适合你的项目吗？

适用场景

汉字教学材料制作：为单个汉字或词表生成笔顺 GIF，用于课件或练习册
工具站开发参考：借鉴其表单交互、命令行封装与在线演示的整合方式
批量处理需求：通过 JSON 文件批量生成大量汉字动画，支持并发控制

适合人群

需要生成汉字笔顺动画的开发者或教育内容创作者
希望研究 Hanzi Writer、Puppeteer 与 FFmpeg 集成方式的技术人员
寻找带真实演示的工具站模板，作为自己项目起点的用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js 22.12 或更新版本、pnpm 10.34.5（通过 Corepack）以及 FFmpeg（含 ffprobe）。
2
安装时 Puppeteer 会自动下载 Chrome Headless Shell，若跳过可手动执行 `corepack pnpm exec puppeteer browsers install chrome-headless-shell`。
3
生成前请确认输入字符在 hanzi-writer-data 中有本地笔画数据。

查看仓库使用说明

授权与来源资料

使用条件与限制

有额外使用条件

原代码为MIT，但汉字笔画数据来自hanzi-writer-data，依Arphic Public License分发，使用该数据需遵守其条款。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
保留MIT版权声明和许可声明
使用汉字笔画数据时遵守Arphic Public License

额外费用与待核对事项

Arphic Public License全文未提供，具体义务无法确认
其他依赖的许可证未提供全文

查看原文依据

Character stroke data is provided by [`hanzi-writer-data`](https://github.com/chanind/hanzi-writer-data), derived from Arphic fonts and distributed under the Arphic Public License included with that package.
README 原文