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

安装

在 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 变量可用。

通过 npm 加载 Hanzi Writer

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

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

如果你想在旧版本 IE10/IE11 使用 Hanzi Writer，你需要为 Promise api 提供一个填充工具

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

微信小程序使用

Hanzi Writer Wechat Miniprogram Plugin (微信小程序组件)

Installation

npm install hanzi-writer-miniprogram

Usage

In your page.json, first add the following to enable the hanzi-writer-view component:

{
  "usingComponents": {
    "hanzi-writer-view": "hanzi-writer-miniprogram/hanzi-writer-view"
  }
}

Then, add a hanzi-writer-view component to your page. You must add an id, width, and height, like below:

<hanzi-writer-view id="hz-writer" width="300" height="300" />

Then in your page, you can control the view via createHanziWriterContext(options), like below:

import createHanziWriterContext from 'hanzi-writer-miniprogram';

Page({
  onLoad: function() {
    this.writerCtx = createHanziWriterContext({
      id: 'hz-writer',
      character: '你',
      page: this,
    });

    // You can call any normal HanziWriter method here
    this.writerCtx.loopCharacterAnimation();
  }
});

This method requires the id from the hanzi-writer-view component in wxml, and the current page.
https://openbase.com/js/hanzi-writer-miniprogram
https://hanziwriter.org/cn/docs.html
https://juejin.cn/post/6866314175849693197