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>
