官网：Hanzi Writer
文档：Hanzi Writer
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; } }
