将汉字转换成笔画代码_hanzi-writer实践：教你一分钟写一个汉字笔画工具

背景

家里有小朋友的家长，有没有这种体验？教小朋友写字，总是弄不准有些常见汉字的笔画。百度搜索笔顺，有些自己写了多年的字，笔画竟然是错的。比如，我写 “毕” 字，提笔先写是竖勾，而正确的第一步是一横。

字写不准，俗称 “发倒笔”，有误导下一代的风险！网上能找到有该功能的 APP ，但下载使用过程中看到广告超多，体验很不好。怎么办呢？

我在 GithHub 上找到一个汉字笔画的项目 hanzi-writer，正好可以解决笔画查找的问题。短短60几行的代码，一个 html 就可以实现一个笔顺回显的工具，挂到 GitHub 的免费服务器上，作为小朋友的识字小游戏，会很不错哦。

本文就来教你一分钟写一个笔画绘制应用。

项目地址

hanzi-writer 项目地址为：https://chanind.github.io/hanzi-writer/docs.html
看了下文档，使用很简单。

demo 例子

依据官网的介绍， js 库还是很好用的，引入一个 js 就可以了。
我写了一个接受文本输入框的输入、并显示对应汉字笔画的 demo ，代码如下：

    展示汉字笔画的小页面

文本框内输入一个汉字，并点击“笔画按钮”

Animate仅支持一个汉字



关键在于 setCharacter 方法，它用于二次渲染时重新渲染汉字区域，如果对已经渲染过的区域再次 create 时会出现汉字叠加的现象。

运行结果

无法添加外链，感兴趣的朋友可以点击【https://woodvine.github.io/drawhanzi.html】，输入“毕” 字，查看笔画结果：

毕字的笔画

后记

试了下这个汉字库，的确不错，突然发现有些字写了十几年竟然是错误的笔画，
比如“毕”、“爽”、“匝”。

看来汉字笔画学习还是应该从娃娃抓起啊……