前端应用 - 汉字笔顺书写演示带拼音及发音

本程序实现汉字笔顺练习，同时有拼音及汉字发单，先见效果图：

详细程序包可在我共享中下载。

js主文件（app.js）

var writer;
var isCharVisible;
var isOutlineVisible;

function printStrokePoints(data) {
var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);
console.log(`[${pointStrs.join(', ')}]`);
}

function updateCharacter() {
   var character = document.querySelector('.js-char').value;
    var targetBgHtml = '<line x1="0" y1="0" x2="360" y2="0" stroke="#DDD"/>'+
            '<line x1="0" y1="0" x2="0" y2="360" stroke="#DDD"/>'+
            '<line x1="0" y1="360" x2="360" y2="360" stroke="#DDD"/>'+
            '<line x1="360" y1="0" x2="360" y2="360" stroke="#DDD"/>'+
            '<line x1="0" y1="180" x2="360" y2="180" stroke="#DDD"/>'+
            '<line x1="180" y1="0" x2="180" y2="360" stroke="#DDD"/>'+
            '<line x1="0" y1="0" x2="360" y2="360" stroke="#DDD"/>'+
            '<line x1="0" y1="360" x2="360" y2="0" stroke="#DDD"/>';

   document.querySelector('#target').innerHTML = targetBgHtml;
    var fayin = 'https://tts.baidu.com/text2audio.mp3?tex='+character+'&cuid=baike&lan=ZH&ctp=1&pdt=301&vol=100&rate=32&per=2&spd=3&pit=3'
    var pinyin = pinyinUtil.getPinyin(character, ' ', true, 0);
    var laba = '<span οnclick="boyin()"><img src="https://img2.baidu.com/it/u=1117336567,3871342766&fm=26&fmt=auto&gp=0.jpg" style="width: 40px;"></a>';
    var boyin = '<audio src="'+fayin+'" id="boyin"></audio>';
    document.querySelector('#pinyin').innerHTML = pinyin + ' '+laba + boyin;
   window.location.hash = character;
   writer = HanziWriter.create('target', character, {
       width: 360,
       height: 360,
       radicalColor: '#166E16',
       onCorrectStroke: printStrokePoints,
       onMistake: printStrokePoints,
        showOutline: true
   });
   isCharVisible = true;
   isOutlineVisible = true;
   window.writer = writer;
}

window.onload = function() {
   var char = decodeURIComponent(window.location.hash.slice(1));
   if (char) {
       document.querySelector('.js-char').value = char;
   }

updateCharacter();

document.querySelector('.js-char-form').addEventListener('submit', function(evt) {
       evt.preventDefault();
       updateCharacter();
   });

html页面主文件（index.html）

<!DOCTYPE html>
<html lang="en-us">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
       <title>汉字笔顺书写演示</title>
       <link rel="stylesheet" href="static/css/styles.css?v=2021.8.25 17:55" />
   </head>
   <body>

<h1 class="title">汉字笔顺书写演示</h1>
       <form class="js-char-form char-form">
           <label>汉字：</label>
           <input type="text" class="js-char char-input" size="1" maxlength="1" value="我" />
           <button type="submit">确定</button>
       </form>
       <div class="actions">
           <button class="js-toggle">显示/隐藏</button>
           <button class="js-toggle-hint">描红开/关</button>
           <button class="js-animate">书写演示</button>
           <button class="js-quiz">书写练习</button>
       </div>
        <div id="pinyin"></div>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" id="target">
            <line x1="0" y1="0" x2="360" y2="0" stroke="#DDD"/>
            <line x1="0" y1="0" x2="0" y2="360" stroke="#DDD"/>
            <line x1="0" y1="360" x2="360" y2="360" stroke="#DDD"/>
            <line x1="360" y1="0" x2="360" y2="360" stroke="#DDD"/>

            <line x1="0" y1="180" x2="360" y2="180" stroke="#DDD"/>
            <line x1="180" y1="0" x2="180" y2="360" stroke="#DDD"/>
            <line x1="0" y1="0" x2="360" y2="360" stroke="#DDD"/>
            <line x1="0" y1="360" x2="360" y2="0" stroke="#DDD"/>
        </svg>


        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script>
       <script type="application/javascript" src="static/js/app.js?v=2021.8.25 17:55"></script>
        <script type="text/javascript" src="static/js/pinyin_dict_withtone.js"></script>
        <script type="text/javascript" src="static/js/pinyinUtil.js"></script>
   </body>
</html>

样式表文件（styles.css）

@font-face {
    font-family: 'Ausion Personal Use';
    src: url("../fonts/AusionPersonalUse.otf") format("opentype");
    font-family: 'STXIHEI';
    src: url("../fonts/STXIHEI.TTF");
}

body, html {
   background: #f4f0ea;
   margin: 0;
   padding: 0;
   text-align: center;
   font-family: 'Ausion Personal Use','Raleway', sans-serif;
   font-size: 14px;
}
body {
   padding-bottom: 80px;
}
* {
   box-sizing: border-box;
}

input, button {
outline: none;
}
button, #target, .title {
box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

button, #target {
text-shadow: 0 1px 1px white;
}

.title {
   color: white;
   background: linear-gradient(to bottom, #333, #222);
   padding: 15px 0;
   margin: 0 0 30px;
   text-shadow: 0 0 15px #55aa7f;
}

#target {
   background: white;
   clear: both;
   border: 0px solid black;
   width: 360px;
   height: 360px;
   margin: 0 auto;
}

.char-form {
   margin: 0 0 20px;
}
.char-form label{
    font-size: 20px;
}
.char-form button ,.char-form button:hover{
   padding: 6px 15px;
    font-size: 16px;
   display: inline-block;
   vertical-align: top;
    background-color: rgba(85, 170, 127, 1.0);
    border: 0px;
    color:rgba(255, 255, 255, 1.0);
    border-radius: .2rem;
}

.char-input {
   font-size: 20px;
   padding: 5px;
   width: 50px;
   text-align: center;
    border: 0px;
    color:rgba(255, 85, 0, 1.0);
    border-radius: .2rem;
}

.actions {
width: 360px;
margin: 0 auto;
}

.actions button {
   display: block;
   padding:5px 10px;
    width:86px;
   float: left;
   margin-right: 4px;
   margin-bottom: 4px;
}
.actions button:last-child {
   margin-right: 0;
}

button {
   background: none;
   border: 1px solid #444;
   color: #444;
   cursor: pointer;
   transition: all 300ms;
    border-radius: .2rem;
}

button:hover {
   color: #55aa7f;
   border: 1px solid #55aa7f;
   box-shadow: none;
}
#pinyin{
    width: 360px;
    height: 50px;
    margin: 10px auto;
    background-color: rgba(255, 255, 255, 1.0);
    border: 0px;
    color:rgba(22,110,22, 1.0);
    font-size: 40px;
    font-weight: 600;
    font-family: "STXIHEI","Ausion Personal Use";
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    clear: both;
}

前端应用 - 汉字笔顺书写演示带拼音及发音相关推荐

unity | 输入汉字自动转换成带拼音（带声调）
就只需要下载一个带拼音的字体,就可以解决,字体链接放在下面 [汉字拼音体]一款文字头上自带拼音和声调的字体-100font.com 我个傻子...试了好几次用代码转....
Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/ ** 具体实现 ** 在 script 标签加载 Hanzi Writer 只需将以下内容放入 ...
.net 数字转汉字_[原创工具] 小熊汉字笔顺学习软件，查笔顺、学拼音、制作汉字英文数字字贴...
点击右上角"设为星标"每日精彩内容,第一时间送达! 前言今天带来的是原创软件.家里有上一二年级的小朋友有福了!家里有打印机的可以把设置好的字帖打印出来,小朋友即可临摹.赶紧下载使 ...
Java字母笔顺_Android实现中文汉字笔划(笔画)、中文拼音排序、英文排序
一.需求描述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 微信:简体中文.拼音排序微信:繁体中文.笔画排序微信英文字母排 ...
汉字的书写效果的实现
汉字的书写效果的实现本文记录一下如何基于字体实现汉字svg描点的过程参考项目: 1.makemeahanzi https://github.com/skishore/makemeahanz ...
android汉字笔顺数据库,Chinese stroke order app
Chinese stroke order app是一款非常不错的手机汉字笔顺练习学习软件,想要学习中文的外国友人们可以使用该软件学习中国字,毛笔字,这里有非常齐全的汉字练习笔顺,智能练习,给予提示,喜 ...
常见笔顺错误的字_最全汉字笔顺正确写法，建议家长为孩子收藏
众所周知,要想把字写好,基本笔画是练习的基础,就像是汉字组装零件.这些零件除了位置要对,也要有序地摆放,这样才会更顺手.虽然有人会说字写得好看就好,何必计较笔画顺序呢? 确实,观看工整的楷书时无法根据 ...
汉字计算机坟墓,墓的拼音_墓组词_墓意思（解释）-常用汉字大全
墓的拼音,组词,意思(解释) 分类: 时间:2020年06月14日 1:35:28 本文主要介绍汉字「墓」的拼音,意思.解释,怎么组词,笔顺,笔画,部首等信息.仔细阅读,能够提高您文学修养. 「墓」拼 ...
生僻字用计算机的歌词,生僻字歌词带拼音版本：生僻字歌词是什么意思？
最近有一首史上最难唱的歌<生僻字>,<生僻字>顾名思义全都是有生僻字组成,看完大家都觉得自己可能读的是假书,因为像个文盲一样根本不知道这些生僻字都怎么念,也不知道这些生僻字歌词 ...
android音频声调,Android自定义带拼音音调Textview
本文实例为大家分享了Android自定义带拼音音调Textview的具体代码,供大家参考,具体内容如下 1.拼音textview,简单的为把拼音数组和汉字数组结合在一起多行显示 import andr ...

前端应用 - 汉字笔顺书写演示带拼音及发音

前端应用 - 汉字笔顺书写演示带拼音及发音相关推荐

最新文章

热门文章