本程序实现汉字笔顺练习，同时有拼音及汉字发单，先见效果图：
详细程序包可在我共享中下载。
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 = '/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="/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();
});
document.querySelector('.js-toggle').addEventListener('click', function() {
isCharVisible ? writer.hideCharacter() : writer.showCharacter();
isCharVisible = !isCharVisible;
});
document.querySelector('.js-toggle-hint').addEventListener('click', function() {
isOutlineVisible ? writer.hideOutline() : writer.showOutline();
isOutlineVisible = !isOutlineVisible;
});
document.querySelector('.js-animate').addEventListener('click', function() {
writer.animateCharacter();
});
document.querySelector('.js-quiz').addEventListener('click', function() {
writer.quiz({
showOutline: true
});
});
}
function boyin(){
document.getElementById("boyin").play();
}
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=.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="/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="/jquery-1.12.4.min.js"></script>
<script src="/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script>
<script type="application/javascript" src="static/js/app.js?v=.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;
}
