分享3：hanzi-writer（演示汉字笔画顺序的 JS 库）

墨蓝 2023-06-06 13:28 12阅读 0赞

# 文章灵感来自[https://chanind.github.io/hanzi-writer/][https_chanind.github.io_hanzi-writer] #

通过这个，我很容易就想到小学的汉字书写了，说句实话，自从毕业后基本上就很少写字，而且经常提笔忘字（深深的自责中…），通过这个可以加强汉字的笔画练习，而且后期可以扩展为带拼音和读音的方便我们学习，以及指导自家小孩进行汉字练习等，balabalabal一大推，部分结果如下。

代码分享链接：  
链接：[https://pan.baidu.com/s/1xWI14MR2QJ8jIzpiYyK9gw][https_pan.baidu.com_s_1xWI14MR2QJ8jIzpiYyK9gw]  
提取码：7788

--------------------

第一通过html，js进行调用hanzi-writer的库

1.  html

<head>
            <script src="./src/chwriter.js"></script>//这里你可以下载原js然后本地引用，或者直接联网引用远程js
            
        </head>
        <body>
            输入汉字进行练习：<input type="text" id="inputstr"/>
            <button onclick="hwanimate()">动画</button>
            
            <div id="character-target-div"></div>
            
            <svg width="300" height="300" style="border: 1px solid rgb(221,221,221);" id="grid-background-target">
                <line x1="0" y1="0" x2="300" y2="300" stroke="#DDD" />
                <line x1="300" y1="0" x2="0" y2="300" stroke="#DDD" />
                <line x1="150" y1="0" x2="150" y2="300" stroke="#DDD" />
                <line x1="0" y1="150" x2="300" y2="150" stroke="#DDD" />
            </svg>
        </body>

1.  js

1.  演示  
    ![在这里插入图片描述][20191017113115420.gif]  
    参看源码，以及网络请求发现还是通过网络获取的数据，于是想到一个问题，我们可以能否把，所有数据获取到呢？【结果显然是可以直接获取的】，这样的话我们就可以部署到本地了,不用基于网络获取别人的数据了

var VERSION = '2.0';
    var getCharDataUrl = function getCharDataUrl(char) { 
      return 'https://cdn.jsdelivr.net/npm/hanzi-writer-data@' + VERSION + '/' + char + '.json';
    };
    ...

![在这里插入图片描述][2019101711373254.png]  
说明：基于网络获取每一个汉字的笔画等数据。

--------------------

下面是部署到本地后的展示  
![在这里插入图片描述][20191017133435116.gif]

--------------------

下面是纯html的展示  
不用说我估计还是有人会说你这个还是基于网络的，那么我们可以通过一次定义js的方式吧数据转为json格式加载【最好用程序生成手动修改较为复杂】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20191017134456511.gif]  
**从图中可以看到，‘三’，‘丁’，‘七’都是不请求网络的**

--------------------

感谢  
@weixin\_43372097提出的问题  
问题：本地直接访问html报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]  
可以看出这里是跨域出现了一点问题，那么我们在服务器添加允许跨域即可。

res.setHeader('Access-Control-Allow-Origin','*');

更新代码即可

[https_chanind.github.io_hanzi-writer]: https://chanind.github.io/hanzi-writer/
[https_pan.baidu.com_s_1xWI14MR2QJ8jIzpiYyK9gw]: https://pan.baidu.com/s/1xWI14MR2QJ8jIzpiYyK9gw
[20191017113115420.gif]: /images/20230601/5302723258b54f2a9ea80c64c0e3c950.png
[2019101711373254.png]: /images/20230601/d187fce1afd14b4182b7fd2d4270dee0.png
[20191017133435116.gif]: /images/20230601/d9cafbdbf8ed4fc8a1bfef15f4f0b0ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20230601/67d429c65c02458e8aded023fe632a52.png
[20191017134456511.gif]: /images/20230601/c0788f8086d441b4b5487f0d76b8b5c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]: /images/20230601/4735909e44cb44c8bfa012194f886550.png