在线汉字笔画练习工具（HTML文件版）

于 2025-06-07 15:00:00 发布
阅读量445 收藏 7
点赞数 4
分类专栏： JavaScrip技术 HTML5与CSS3 编程实践系列 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123/article/details/148385687
版权

在线汉字笔画练习工具（HTML文件版）

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

可以使用script标签加载CDN：

<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>

也可以将hanzi-writer.min.js下载到本地，这样就可以离线使用了。

可以根据用户输入的字，给出其笔画动画演示和手写练习。对于确实不支持的汉字也会给出明确的提示。支持的汉字范围：常用汉字（依赖hanzi-writer数据库）。

这个的JavaScript方案有很多优势：

    使用现成的hanzi-writer库；

    完全在浏览器端运行；

    良好的交互体验；

    部署简单（一个HTML文件即可）。

工作流程

 输入一个汉字，点几“确认”，从hanzi-writer库中取出此汉字的笔画信息。当第一次请求某个汉字时，需要从 CDN 下载该汉字的笔画数据文件，所以会较慢。一旦下载后，数据会被浏览器缓存，再次使用同一个字就会较快。

    点击“演示动画”可以看到笔顺演示。

    点击“开始练习”可以进行手写描摹练习。

运行截图如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>汉字书写练习</title>
    <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
    <style>
        .container {
            text-align: center;
            margin: 20px;
        }
        #character-target-div {
            border: 1px solid #ddd;
            margin: 20px auto;
        }
        .button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #45a049;
        }
        .button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .input-group {
            margin: 10px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        input {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 50px;
            text-align: center;
        }
        #confirmButton {
            background-color: #007bff;
        }
        #confirmButton:hover {
            background-color: #0056b3;
        }
        #status {
            margin: 10px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .loading {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>在线汉字书写练习工具</h1>
        <div class="input-group">
            <input type="text" id="characterInput" 
                   placeholder="汉字" 
                   maxlength="1" 
                   oninput="onCharacterInput()">
            <button class="button" id="confirmButton" onclick="loadCharacter()">确认</button>
        </div>
        <br>
        <button class="button" id="animateButton" onclick="showAnimation()" disabled>演示动画</button>
        <button class="button" id="quizButton" onclick="startQuiz()" disabled>开始练习</button>
        <br>
        <div id="status"></div>
        <div id="character-target-div"></div>
    </div>

    <script>
        let writer = null;
        let loadingTimeout = null;

        function onCharacterInput() {
            // 输入新字符时禁用功能按钮
            document.getElementById('animateButton').disabled = true;
            document.getElementById('quizButton').disabled = true;
            
            // 清除之前的状态和内容
            hideStatus();
            if (writer) {
                document.getElementById('character-target-div').innerHTML = '';
                writer = null;
            }
        }

        function showStatus(message, type = 'loading') {
            const statusDiv = document.getElementById('status');
            statusDiv.className = type;
            statusDiv.style.display = 'block';
            
            if (type === 'loading') {
                statusDiv.innerHTML = `<div class="loading-spinner"></div>${message}`;
            } else {
                statusDiv.textContent = message;
            }

            if (type === 'error') {
                setTimeout(() => {
                    statusDiv.style.display = 'none';
                }, 3000);
            }
        }

        function hideStatus() {
            document.getElementById('status').style.display = 'none';
        }

        function setButtonsEnabled(enabled) {
            document.getElementById('animateButton').disabled = !enabled;
            document.getElementById('quizButton').disabled = !enabled;
            document.getElementById('confirmButton').disabled = !enabled;
        }

        async function loadCharacter() {
            const character = document.getElementById('characterInput').value;
            if (!character) {
                showStatus('请输入一个汉字', 'error');
                return;
            }
            await initWriter(character);
        }

        // 检查汉字是否成功渲染
        function checkCharacterRendered() {
            const targetDiv = document.getElementById('character-target-div');
            
            // 检查是否有SVG元素
            const svgElement = targetDiv.querySelector('svg');
            if (!svgElement) {
                return false;
            }
            
            // 检查SVG是否有实际的笔画路径
            const pathElements = svgElement.querySelectorAll('path');
            if (pathElements.length === 0) {
                return false;
            }
            
            // 检查路径是否有实际的绘制数据
            for (let path of pathElements) {
                const d = path.getAttribute('d');
                if (d && d.trim() !== '') {
                    return true;
                }
            }
            
            return false;
        }

        async function initWriter(character) {
            setButtonsEnabled(false);
            showStatus('正在加载汉字数据...请稍候');
            
            document.getElementById('character-target-div').innerHTML = '';

            try {
                // 先检查汉字数据是否存在
                const charDataPromise = HanziWriter.loadCharacterData(character);
                const timeoutPromise = new Promise((_, reject) => {
                    loadingTimeout = setTimeout(() => {
                        reject(new Error('加载超时，请重试'));
                    }, 8000);
                });

                let charData;
                try {
                    charData = await Promise.race([charDataPromise, timeoutPromise]);
                    if (!charData || !charData.strokes || charData.strokes.length === 0) {
                        throw new Error('汉字数据不完整');
                    }
                } catch (error) {
                    clearTimeout(loadingTimeout);
                    throw new Error('抱歉，该汉字可能不存在或暂不支持');
                }

                // 创建writer实例
                writer = HanziWriter.create('character-target-div', character, {
                    width: 300,
                    height: 300,
                    padding: 5,
                    showOutline: true
                });

                // 等待渲染完成并检查结果
                await new Promise(resolve => setTimeout(resolve, 1000));

                if (checkCharacterRendered()) {
                    clearTimeout(loadingTimeout);
                    showStatus('加载完成', 'success');
                    setTimeout(hideStatus, 1000);
                    setButtonsEnabled(true);
                    return writer;
                } else {
                    throw new Error('抱歉，该汉字渲染失败或暂不支持');
                }

            } catch (error) {
                clearTimeout(loadingTimeout);
                showStatus(`${error.message}`, 'error');
                document.getElementById('confirmButton').disabled = false;
                console.error('加载失败:', error);
                
                // 清理可能的残留内容
                document.getElementById('character-target-div').innerHTML = '';
                writer = null;
                return null;
            }
        }

        async function showAnimation() {
            if (writer) {
                writer.animateCharacter();
            } else {
                showStatus('请先确认加载汉字', 'error');
            }
        }

        async function startQuiz() {
            if (writer) {
                writer.quiz({
                    onComplete: function(summaryData) {
                        showStatus('练习完成！', 'success');
                        setTimeout(hideStatus, 2000);
                    }
                });
            } else {
                showStatus('请先确认加载汉字', 'error');
            }
        }
    </script>
</body>
</html>

OK！

Scratch 3的作品（sb3格式的文件）怎么生成可执行exe文件
cnds123的专栏
07-24 10万+
Scratch 3的作品（sb3格式的文件）怎么生成可执行exe文件
[tkinter实现]汉字笔顺小软件
lcj_star的专栏
04-23 829
本软件旨在帮助小学生通过互动式学习掌握汉字的基本笔画和笔顺。软件采用Tkinter库构建，提供了一个用户友好的图形界面，适合小学生使用。
计算机考试重点题目与答案
博客转到了 http://blog.csdn.net/masonblog
08-21 1万+
一、选择题 1、 第一台计算机ENIAC淡生于1946年，是电子管计算机；第二代是晶体管计算机；第三代是中小规模集成电路；第四代是大规模集成电路； 2、 计算机的应用领域主要有：科学计算；信息管理；实时控制；办公、生产自动化；人工智能，网络通信；电子商务；辅助设计（CAI）；辅助设计（CAD）； 3、 计算机的信息表示形式为二进制，它采用了冯。诺依曼的思想原理，即以0 和1两个数字形式用于展
全国计算机等级一级（选择题的）的练习，附加答案
卓卓卓
11-12 4391
1、用高级程序设计语言编写的程序___B_____。 A)计算机能直接执行 B)可读性和可移植性好 C)可读性差但执行效率高 D)依赖于具体机器，不可移植 【解析】高级语言程序要经过编译链接后才能执行，执行效率低，具有良好的可读性和可移植性。 2、下列叙述中，正确的是__D______。 A)把数据从硬盘上传送到内存的操作称为输出 B)WPS Office 2003是一个国产的系统软件 C)扫描仪属于输出设备 D)将高级语言编写的源程序转换成为机器语言程序的程序叫编译程序 【解析】选项
几十个珍藏的网站，相信你会用到的
BoCong-Deng的博客
03-05 4万+
写在前面 论文相关 Sci Hub：各种不能下的论文都能在这里免费下载到，简直就是美滋滋。 中国知网：提供一般学术论文下载，这个应该大家都知道（不知道的比如像濯天临，就直接凉了，嘿嘿嘿），下载一般要钱，不过校网是免费下载的。 小木虫论坛：大多是论文交流，相当于论文里的CSDN，很多写论文的技巧都可以在里面找到。 PaperFree：初步查重，可以免费1W字论文查重，支持机器修改重复的部分，很舒服哦...
SCI科技论文写作成长营（完整版）
Everyday try to become better -Kobe Bryant
05-01 8711
一直以来，SCI论文都是众科研者们前赴后继所追逐的目标，而这不仅仅是因为SCI论文时科研成果的总结，可为国际同行所知晓；更重要的是，对大多数人而言，它还是毕业、晋升、求职的硬性要求。 所以本次成长营的课程特色就在于传授写作原则，总结论文写作套路。这样无论你的课题是 Nature 水平的重大发现还是Scientific Reports水平的研究成果，你都不会再惧怕写作，且能写出一篇漂亮的英文论文。 一般SCI期刊里的Artcle正文均会分成几个部分：Introduction/Background、Materi
ssm毕设小学生汉字学习程序+论文
最新发布
wuzhou201的博客
12-07 508
同时，小学阶段是语言学习的关键时期，汉字的学习是语文学习的基础，然而，在实际的教学中，存在着学生对汉字学习兴趣不高、汉字书写不规范、对汉字文化内涵理解不足等现象。而且，从文化传承的角度看，汉字文化源远流长，承载着中华民族数千年的智慧结晶，如果小学生不能很好地学习汉字，将会影响到中华文化的传承与发展。[11] 刘小玲, 李慧云, 殷珊珊, 贾少华, 许杰辉, 郝颖. 一种基于软件测试任务的信息化管理系统的原型设计[J]. 现代信息科技, 2024, 8 (12): 91-95。
Java从入门到精通 第三版 pdf
weixin_30764771的博客
02-05 1185
下载地址：网盘下载内容简介编辑明日科技编著的《Java从入门到精通》以初、中级程序员为对象，先从Java语言基础学起，再学习Java的核心技术，然后学习Swing的高级应用，最后学习开发一个完整项目。包括初识Java，熟悉Eclipse开发工具，Java语言基础，流程控制，字符串，数组，类和对象，包装类，数字处理类，接口、继承与多态，类的高级特性，异常处理，...
98版五笔字型实用学习教程
weixin_30635053的博客
06-14 1082
98版五笔字型实用学习教程　　本教程简明易懂，分两部分，第一部分为理论学习，看完就好，没必要看第二次。第二部分为学习内容、方法与学习工具。一般一星期即可比较熟练掌握98版五笔字型。第一部分：理论学习1.1 汉字的构成　　 中国人常说： “木子 --- 李”， “日月 --- 明”，可见方块汉字是由较小的块组成的，这些小块如：“木”、“子”、“日”、 “月”等，我们把它们叫“码元”，五笔输入法的五笔...
传智播客 .NET面试宝典（2015版）
qq_34573534的博客
09-24 3431
.Net工程师面试笔试宝典 培训班常见问题 1.你们会带着我们做完整个完整的项目吗？ 答：小的项目会，大的项目则不可能， 1.众所周知，随便拿出一个中等大小的项目，也需要好多个熟练的开发人员开发好多个月才能勉强做得差不多，培训期间没有这么多时间，并且你还要先学会了很多技术后才能开始做项目。 2.一个项目中的很多东西都是重复性的工作量的累积，技术方面都大同小异。做一个项目就好比盖一座楼房...
JS在线汉字笔画练习代码
06-11
本项目名为"JS在线汉字笔画练习代码"，旨在帮助用户通过交互式的方式练习汉字的笔画书写。这个工具利用JS的强大功能，为用户提供了一个方便、直观的平台，可以实时查看和模仿汉字的正确笔画顺序。 首先，`index....
JS在线汉字笔画练习代码.zip
09-27
《JS在线汉字笔画练习代码》是一个非常实用的软件工具，专为汉字学习者和教育工作者设计。这个压缩包包含了实现在线汉字笔画练习功能的所有关键文件，包括样式表、HTML页面、JavaScript库以及必要的补丁文件。接下来...
在线汉字笔画练习工具 - JS特效代码实现
在线汉字笔画练习工具是一款基于Web技术开发的应用程序，允许用户通过输入单个汉字字符后发布，从而生成该汉字的书写笔画练习效果。这种工具通常用于汉字书写练习，尤其是对儿童学习汉字笔顺和笔画非常有帮助。用户...
离线版楷体汉字笔画练习工具
因此，SVG在创建图形和图表方面非常有用，并且非常适合用于精确的汉字笔画练习。 5. 数据来源：资源描述中提到的数据来源为 http。这表明该工具的笔画数据是通过网络获取的，但具体的数据来源URL并没有在描述中给出...
CodeBlocks安装与使用入门
热门推荐
cnds123的专栏
08-28 9万+
CodeBlocks安装与使用入门 CodeBlocks 作为一款轻量级的C/C++ IDE，开源、跨平台、跨编译器： Windows、Linux、Mac OS都可以使用。 支持多款编译器，只要简单配置一下就可以轻松切换gcc/g++、Visual C++、Borland C++、Intel C++等20多款编译器。 CodeBlocksd的安装 CodeBlocks官网https://www.codeblocks.org/ 选择与你电脑对应的codeblocks版本下载（downloads
Python第三方cv2库介绍
cnds123的专栏
08-30 6万+
Python第三方cv2库介绍。CV2指的是OpenCV2（Open Source Computer Vision Library），是一个开源的库平台计算机视觉库。有很强大的图片处理功能，可实现图像处理和计算机视觉方面的很多通用算法。特别提示：安装的时候用opencv_python，但在导入使用的时候用cv2。..................
App Inventor学习环境搭建（详细）
cnds123的专栏
04-29 5万+
App Inventor学习环境搭建及使用 APP INVENTOR由谷歌实验室开发，后移交麻省理工学院，是一款可视化编程环境，采用搭积木的方式快速建立应用程序，并且可以结合AI伴侣，极其便利的在手机上进行测试和应用。 麻省理工学院的App Inventor是一个直观、可视化的编程环境，它允许每个人——甚至是孩子——为智能手机和平板电脑构建功能齐全的应用程序。那些麻省理工学院的新应用程序...
turtle.write方法使用说明
cnds123的专栏
02-21 5万+
turtle.write方法使用说明 关于turtle可参见 Python新手入门学习讲座系列文章 https://blog.csdn.net/cnds123/article/details/108676296 turtle.write()方法 在当前乌龟位置写入文本。使用格式： write(arg,move=false,align='left',font=('arial',8,'normal')) 参数说明 arg：信息，将写入Turtle绘画屏幕。 move（可选）：真/假。在..
编程猫编程平台的使用介绍
cnds123的专栏
05-10 5万+
编程猫（青少年编程教育平台） 编程猫是由深圳点猫科技有限公司自主研发的国内知名青少年编程教育平台，通过图形化编程，可以创作出游戏、软件、动画、故事等。 编程猫官网地址： https://www.codemao.cn 社区首页 https://shequ.codemao.cn 在线编辑器 https://kitten.codemao.cn 建议使用谷歌浏览器Chrome打开https://kitten.codemao.cn，如下图： 编程猫源码编辑器（win_ki...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习&实践爱好者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值