一、实现效果
二、hanzi-writer相关知识点
2.1 cdn引入
注意:如果你想在旧版本 IE10/IE11 使用 Hanzi Writer，你需要为 Promise api 提供一个填充工具
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
2.2 npm引入
// npm 安装
npm install hanzi-writer
//在页面中加载
const HanziWriter = require('hanzi-writer');
2.3 使用
| 属性 | 说明 |
|---|---|
| width | 字符框宽度 |
| height | 字符框高度 |
| padding | 字符和框边缘之间的空格，也以像素为单位 |
| strokeColor | 字符颜色 |
| radicalColor | 偏旁部首颜色 |
| strokeAnimationSpeed | 绘制每个笔划的速度必须大于0。增加此数字可以更快地绘制笔划，减少绘制笔划的速度更慢。 |
| delayBetweenLoops | 数值, 默认 2000。 循环动画时每个动画循环之间的时间（以毫秒为单位）。 |
| animateCharacter() | 让字符按照笔画动起来 |
| animateCharacter() | 让字符按照笔画动起来 |
| strokeColor | 十六进制字符, 默认 '#555'。绘制每个笔划的颜色。 |
| radicalColor | 十六进制字符, 默认 null。 如果存在偏旁部首数据，则在笔划中绘制偏旁部首的颜色。 如果没有设置，激光将绘制与其他笔划相同的颜色。 |
| highlightColor | 十六进制字符, 默认 '#AAF'。 用于在测验中突出显示的颜色。 |
| outlineColor | 十六进制字符, 默认 '#DDD'。 字符轮廓的颜色。 |
| drawingColor | 十六进制字符, 默认 '#333'。 测验期间绘制的线条颜色。 |
| drawingWidth | 数值, 默认 4。 进行测验时绘制的线条宽度。 |
| showHintAfterMisses | 整数, 默认 3 中风高亮提示之前的未命中数被给予用户。 设置为 false 以禁用。 创建测验时也可以设置此项。 |
| highlightOnComplete | 布尔值, 默认 true。 控制当用户完成绘制整个字符时，测验是否会短暂突出显示字符。 创建测验时也可以设置此项。 |
| highlightCompleteColor | 十六进制字符, 默认 null。 在测验中突出显示字符时使用的颜色。 如果未设置，则将使用highlightColor。 仅当highlightOnComplete为true时才相关。 |
| charDataLoader | 函数。 自定义函数 加载字符数据 。 有关使用的更多信息，请参阅加载字符数据部分。 |
| onLoadCharDataSuccess | 函数。 成功加载字符数据时的回调。 使用已加载的数据调用此函数。 这可以用于实现加载微调器。 |
| onLoadCharDataError | 函数。 字符数据加载失败时的回调。 无论故障原因来自charDataLoader，都会传递此函数。 |
<div id="character-target-div"></div>
<button id="animate-button">动画</button>
var writer = HanziWriter.create('character-target-div', '我', {
width: 100, //宽
height: 100,// 高
padding: 5,
strokeColor: '#EE00FF' //字的颜色
});
document.getElementById('animate-button').addEventListener('click', function() {
writer.animateCharacter();
});
