Hanzi Writer 汉字的书写

大家好，我是 城南旧客，今天给大家带来一个很有趣的javascript免费开源库 ，阅读本文只需要 5 分钟。

通过它，我们可以根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。

Hanzi Writer

在 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>

创建一个新的 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});

你能看到以下结果:

然而，这仅仅是最基础的用法。通常而言，业务中对文字书写的要求会更多。
比如这样：

使用  Hanzi Writer 书写一句话

其实非常简单，代码如下：

<div class="name-box">
        <div class="firstname" id="name0"></div>
        <div class="firstname" id="name1"></div>
        <div class="firstname" id="name2"></div>
        <div class="firstname" id="name3"></div>
        <div class="firstname" id="name4"></div>
    </div>
    
    <script>
        let writerConfig = {
            width: 100,
            height: 100,
            padding: 3,
            showOutline: false,
            showCharacter: false,
            strokeColor: '#000000',//字的颜色
            strokeAnimationSpeed: 5, // 5x normal speed
            delayBetweenStrokes: 50, // milliseconds
            padding: 5
        }
        var name = '城南旧客'
        
        function drawCharacter(i,writerConfig ) {
            var writer = HanziWriter.create('name'+i, name[i], writerConfig);
            writer.animateCharacter().then(() => {
                if (name[i + 1]) {
                    drawCharacter(i + 1, writerConfig)
                }
            });
           
       } 
       drawCharacter(0,writerConfig)
       
       </script>

一看就懂，其实Hanzi Writer 使用起来还是非常简单。

Hanzi Writer 使用的局限性

只能是汉字的书写(支持简体字和繁体字)，不支持其他语言书写，

当然，这也不代表它完全没有用武之地，在一些业务环境下， 还是能够使用的。

最后

本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，留言

参考文献：

blog.csdn.net/muzili1006/…

hanziwriter.org/cn/docs.htm…

前端程序猿Pro，欢迎你的关注~