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

最新推荐文章于 2025-03-05 11:29:54 发布

cc百川

最新推荐文章于 2025-03-05 11:29:54 发布

阅读量7.3k

点赞数 5

分类专栏：个人分享文章标签：汉字笔画练习汉字动态演示 hanzi-writer 汉字汉字本地部署

本文链接：https://blog.csdn.net/ljcc122/article/details/102514033

版权

本文介绍了一个用于汉字笔画顺序动态演示的JS库——hanzi-writer，通过该库可以增强汉字笔画练习。作者分享了如何将库部署到本地，避免网络依赖，并解决了本地访问时的跨域问题，适合汉字学习及儿童汉字练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章灵感来自https://chanind.github.io/hanzi-writer/

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

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

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

html

	<head>
        <script src="./src/chwriter.js"></script>//这里你可以下载原js然后本地引用，或者直接联网引用远程js
        <!-- <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@1.3/dist/hanzi-writer.min.js"></script> -->
    </head>
    <body>
        输入汉字进行练习：<input type="text" id="inputstr"/>
        <button onclick="hwanimate()">动画</button>
        <!-- 不通过网格 -->
        <div id="character-target-div"></div>
        <!-- //通过svm画方格 -->
        <svg width="300" height="300" style="border: 1px solid rgb(221,221,221);" id="grid-background-target">
            <line x1

最低0.47元/天解锁文章