【娱乐项目】基于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>