Hanzi Writer 是 javascript 免费开源库，根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字

天马行空skywalk

935人浏览 · 2025-12-20 23:20:15

天马行空skywalk · 2025-12-20 23:20:15 发布

Hanzi Writer 是 javascript 免费开源库，根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。我基于这个库制作了汉字学习项目：汉字学习:汉字学习主要针对小学语文的汉字学习，可以学习汉字的书写笔画，拼音等。 - AtomGit | GitCode

安装

在 script 标签加载 Hanzi Writer

最简单选项是直接从 jsdelivr CDN 加载 Hanzi Writer JS 。只需将以下内容放入你的网页的头部:

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

也可以拷贝一个下载 Hanzi Writer javascript 文件:
hanzi-writer.min.js - 生产压缩版 (32 kb, 9kb 压缩后的)
hanzi-writer.js - 开发未压缩版本 (72 kb)

上面的脚本将在脚本加载后使全局 HanziWriter 变量可用。

比如我在汉字学习这个软件里面，index.html文件中这样用的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学生汉字学习练习软件</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
</head>
<body>

通过 npm 加载 Hanzi Writer

如果你想在 webpack 或 node.js 中包含 Hanzi Writer，你可以从 npm install hanzi-writer 安装。

 npm install hanzi-writer

然后，可以在你的代码中包含 Hanzi Writer

const HanziWriter = require('hanzi-writer');

基本使用

在屏幕上渲染

创建一个新的 HanziWriter 实例需要传入一个目标 div （ID 或者 DOM 引用）,你要渲染的汉字, 配置选项. 下面举例说明一个简单的例子。在 HTML 中声明以下内容:

<div id="character-target-div"></div>

然后, 在 Javascript:

var writer = HanziWriter.create('character-target-div', '我', {
  width: 100,
  height: 100,
  padding: 5
});

你能看到以下结果:

在上面的示例中，width和height是包含字符的框的大小（以像素为单位），padding是字符和框边缘之间的空格，也以像素为单位你也可以配置其他选项，例如角色的颜色。下面是使用不同尺寸和颜色绘制的示例：

var writer = HanziWriter.create('character-target-div', '爽', {
  width: 150,
  height: 150,
  padding: 20,
  strokeColor: '#EE00FF' // pink
});

Hanzi Writer 也支持给汉字的偏旁部首上设置不同的颜色。你可以用 radicalColor 选项来设置来展示的部手颜色. 下面的以草字为例给偏旁部首添加绿色。

var writer = HanziWriter.create('character-target-div', '草', {
  width: 150,
  height: 150,
  padding: 5,
  radicalColor: '#168F16' // green
});

动画

当你创建了一个 Hanzi Writer 实例后，你可以调用 animateCharacter() 方法来让它运动. 在下面的例子中, 点击按钮可以让汉字运动。这个 HTML 代码看起来是下面这个样子:

<div id="character-target-div"></div>
<button id="animate-button">动画</button>

Then, the corresponding javascript:

var writer = HanziWriter.create('character-target-div', '国', {
  width: 100,
  height: 100,
  padding: 5,
  showOutline: true
});
document.getElementById('animate-button').addEventListener('click', function() {
  writer.animateCharacter();
});

实践

在汉字学习这个项目中，是这样使用的，script.js文件代码：

    createWriter(containerId, character, isPractice = false) {
        const container = document.getElementById(containerId);
        container.innerHTML = ''; // 清除之前的内容

        const writerConfig = {
            width: isPractice ? 200 : 150,
            height: isPractice ? 200 : 150,
            padding: isPractice ? 20 : 10,
            showOutline: true,
            strokeColor: '#333333',
            radicalColor: '#168F16'
        };

        try {
            const writer = HanziWriter.create(container, character, writerConfig);

            if (isPractice) {
                this.practiceWriter = writer;
            } else {
                this.writer = writer;
            }

            return writer;
        } catch (error) {
            console.warn(`无法创建${character}的动画实例: ${error.message}`);
            
            // 创建一个简单的占位符
            container.innerHTML = `<div class="placeholder-writer">${character}</div>`;
            container.style.display = 'flex';
            container.style.justifyContent = 'center';
            container.style.alignItems = 'center';
            container.style.fontSize = isPractice ? '120px' : '100px';
            container.style.color = '#333333';
            
            return null;
        }
    }