背景
最近在教小朋友写字，令人惆怅的是我竟然弄不准有些常见汉字的笔画。百度搜了下，这么多年自己写“毕”的笔画竟然是错的，提笔先写的是竖勾，而正确的第一步是一横，真有误导下一代的风险啊。
网上能找到有该功能的 APP ，但下载使用过程中看到广告超多，体验很不好。
今天在阮一峰先生每周分享的素材中看到了一个汉字笔画的项目 hanzi-writer，正好可以解决笔画查找的问题，所以玩了下这个项目，顺便写了一个小应用，把它发送到手机桌面上，成了小朋友日常爱玩的识字小游戏了。
项目地址
hanzi-writer 项目地址为：https://chanind.github.io/hanzi-writer/docs.html
看了下文档，使用很简单。
demo 例子
依据官网的介绍， js 库还是很好用的，引入一个 js 就可以了。
我写了一个接受文本输入框的输入、并显示对应汉字笔画的 demo ，代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>展示汉字笔画的小页面</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
<script type="text/javascript">
var writer = null;
function show() {
var x = document.getElementById("name");
if(character.length>1){
character = character.substring(0,1);
}
//判断是否是汉字
var re=/[\u4E00-\u9FA5]/;
if (!re.test(character)){
$("#msg").text("请输入一个汉字！");
return false ;
}
//首次渲染，创建汉字
if(writer == null){
writer = HanziWriter.create('grid-background-target', x.value, {
width: 200,
height: 200,
padding: 5,
showOutline: true
});
}else{//非首次，则修改为新的汉字
writer.setCharacter(x.value);
}
//动画展示汉字笔画
writer.animateCharacter();
}
</script>
</head>
<body>
<p>文本框内输入一个汉字，并点击“笔画按钮”</p>
<input type="text" id="name"/>
<button id="animate-button" onclick="show();">Animate</button>
<span id="msg" style="color:red;">仅支持一个汉字</span>
<br/>
<br/>
<!--汉字所在的田字格背景图-->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" id="grid-background-target">
<line x1="0" y1="0" x2="200" y2="0" stroke="#DDD"/>
<line x1="0" y1="0" x2="0" y2="200" stroke="#DDD"/>
<line x1="0" y1="200" x2="200" y2="200" stroke="#DDD"/>
<line x1="200" y1="0" x2="200" y2="200" stroke="#DDD"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="#DDD"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="#DDD"/>
<line x1="0" y1="0" x2="200" y2="200" stroke="#DDD"/>
<line x1="0" y1="200" x2="200" y2="0" stroke="#DDD"/>
</svg>
</body>
</html>
关键在于 setCharacter 方法，它用于二次渲染时重新渲染汉字区域，如果对已经渲染过的区域再次 create 时会出现汉字叠加的现象。
运行结果
汉字笔画演示地址，点击输入“毕”字，查看笔画结果：
后记
试了下这个汉字库，的确不错。突然发现有些字写了十几年竟然是错误的笔画，
比如“毕”、“爽”、“匝”。看来汉字笔画学习还是应该从娃娃抓起啊。
