【娱乐项目】基于cnchar库与JavaScript的汉字查询工具

Demo介绍

利用了 cnchar 库来进行汉字相关的信息查询，并展示了汉字的拼音、笔画数、笔画顺序、笔画动画等信息
用户输入一个汉字后，点击查询按钮，页面会展示该汉字的拼音、笔画数、笔画顺序，并绘制相应的笔画动画和测试图案

cnchar 库

cnchar 是一个用于处理汉字的 JavaScript 库，主要功能包括拼音查询、笔画数查询、笔画顺序、汉字书写动画等。这个库特别适用于中文学习和汉字处理，能够帮助开发者和学习者更好地理解和掌握汉字

主要功能：

拼音查询： cnchar 可以为输入的汉字提供拼音查询，包括带音调和不带音调的拼音。
笔画数查询：该库可以返回汉字的笔画数，这对学习书写汉字的学生非常有帮助。
笔画顺序： cnchar 可以展示汉字的正确笔画顺序，有助于用户学习如何正确书写汉字。它还可以提供笔画的图形展示（通过动画或普通笔画顺序的绘制）。
汉字书写动画：该库支持通过动画形式展示汉字的笔画顺序，让用户能够直观地理解每个字的书写流程。这对汉字初学者尤其有用。
汉字绘制功能：通过 cnchar.draw() 方法，可以绘制汉字的笔画，不仅可以绘制笔画顺序，还可以绘制练习用的汉字图案。
汉字测试： cnchar 还提供了练习功能，用户可以通过绘制和测试图形来练习书写汉字。

使用方式：

网页调用：
<script src="https://cdn.jsdelivr.net/npm/cnchar"></script>
npm 导入：
npm install cnchar
import cnchar from 'cnchar';

HTML代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>汉字查询工具</title><style>.result {margin-top: 20px;}</style><script src="js/cnchar.min.js"></script><script src="js/cnchar.order.min.js"></script><script src="js/cnchar.draw.min.js"></script></head><body><h1>汉字查询工具</h1><input type="text" id="chinese-input" placeholder="请输入汉字" oninput="handleInput()"><button id="query-btn">查询</button><div class="result" id="pinyin-result">拼音:</div><div class="result" id="stroke-count-result">笔画数:</div><div class="result" id="stroke-order-result">笔画顺序:</div><div class="result">笔画:</div><div id='drawStroke'></div><div class="result">笔画-动画:</div><div id='drawAnimation'></div><div class="result">笔画-正常:</div><div id='drawNormal'></div><div class="result">练一练:</div><div id='drawTest'></div>
</body>
</html>

JavaScript 代码

【引入库】

cnchar.min.js：这是 cnchar 的核心库，提供了查询汉字拼音、笔画数等功能
cnchar.order.min.js：用于获取汉字的笔画顺序
cnchar.draw.min.js：提供绘制汉字笔顺动画和测试图案的功能。

查询汉字信息

spell（）：获取输入汉字的拼音
stroke（）：获取输入汉字的笔画数
cnchar.stroke（）：获取输入汉字的笔画顺序，返回一个字符串，表示汉字的笔画顺序

function queryChineseInfo(chineseChar) {const pinyin = chineseChar.spell(); // 获取拼音const strokeCount = chineseChar.stroke(); // 获取笔画数const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序
}

更新页面的查询结果

将获取到的拼音、笔画数和笔画顺序显示在页面上相应的 div 元素中

document.getElementById('pinyin-result').innerText = '拼音: ' + pinyin;
document.getElementById('stroke-count-result').innerText = '笔画数: ' + strokeCount;
document.getElementById('stroke-order-result').innerText = '笔画顺序: ' + strokeOrder;

绘制汉字的笔顺动画

cnchar.draw（）：用于绘制汉字的笔画
type: cnchar.draw.TYPE.STROKE：绘制笔画
type: cnchar.draw.TYPE.ANIMATION：绘制带动画效果的笔画
loopAnimate: true：设置动画循环播放

cnchar.draw(chineseChar, {el: '#drawStroke',type: cnchar.draw.TYPE.STROKE,animation: {loopAnimate: true}
});

清除之前的查询结果

function handleInput() {document.getElementById('pinyin-result').innerText = '拼音:';document.getElementById('stroke-count-result').innerText = '笔画数:';document.getElementById('stroke-order-result').innerText = '笔画顺序:';
}

按钮点击事件

document.getElementById('query-btn').addEventListener('click', function () {const inputField = document.getElementById('chinese-input');const chineseChar = inputField.value;if (chineseChar) {queryChineseInfo(chineseChar);} else {alert('请输入汉字进行查询');}
});

完整代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>汉字查询工具</title><style>.result {margin-top: 20px;}</style><script src="js/cnchar.min.js"></script><script src="js/cnchar.order.min.js"></script><script src="js/cnchar.draw.min.js"></script></head><body><h1>汉字查询工具</h1><input type="text" id="chinese-input" placeholder="请输入汉字" oninput="handleInput()"><button id="query-btn">查询</button><div class="result" id="pinyin-result">拼音:</div><div class="result" id="stroke-count-result">笔画数:</div><div class="result" id="stroke-order-result">笔画顺序:</div><div class="result">笔画:</div><div id='drawStroke'></div><div class="result">笔画-动画:</div><div id='drawAnimation'></div><div class="result">笔画-正常:</div><div id='drawNormal'></div><div class="result">练一练:</div><div id='drawTest'></div><script>// 使用 cnchar 库查询汉字信息function queryChineseInfo(chineseChar) {const pinyin = chineseChar.spell(); // 获取拼音const strokeCount = chineseChar.stroke(); // 获取笔画数const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序document.getElementById('pinyin-result').innerText = '拼音: ' + pinyin;document.getElementById('stroke-count-result').innerText = '笔画数: ' + strokeCount;document.getElementById('stroke-order-result').innerText = '笔画顺序: ' + strokeOrder;// 绘制汉字的笔顺动画cnchar.draw(chineseChar, {el: '#drawStroke',type: cnchar.draw.TYPE.STROKE,animation: {loopAnimate: true}});// 绘制汉字的笔顺动画cnchar.draw(chineseChar, {el: '#drawAnimation',type: cnchar.draw.TYPE.ANIMATION,animation: {loopAnimate: true}});// 绘制汉字的笔顺正常cnchar.draw(chineseChar, {el: '#drawNormal'})// 绘制汉字的测试图案cnchar.draw(chineseChar, {el: '#drawTest',type: cnchar.draw.TYPE.TEST});}// 监听查询按钮的点击事件document.getElementById('query-btn').addEventListener('click', function () {const inputField = document.getElementById('chinese-input');const chineseChar = inputField.value;if (chineseChar) {queryChineseInfo(chineseChar);} else {alert('请输入汉字进行查询');}});// 监听输入框的输入事件，用于清除之前的查询结果function handleInput() {document.getElementById('pinyin-result').innerText = '拼音:';document.getElementById('stroke-count-result').innerText = '笔画数:';document.getElementById('stroke-order-result').innerText = '笔画顺序:';}</script>
</body></html>