背景

最近在教五岁的毕小宝小朋友写字，令人惆怅的是我竟然弄不准汉字的笔画。百度搜了下，这么多年自己写 “毕”的笔画竟然是错的，提笔先写的是竖勾，而正确的第一步是一横，真有误导下一代的风险啊。

https://www.ryw168.com/news/cases/15103.html

网上能找到有该功能的 APP ，但下载使用过程中看到广告超多，体验很不好。

今天在阮一峰先生每周分享的素材中看到了一个汉字笔画的项目 hanzi-writer，正好可以解决笔画查找的问题，所以玩了下这个项目，顺便写了一个小应用，以后就可以用它来查汉字笔画啦！

项目地址

hanzi-writer 项目地址为：https://chanind.github.io/hanzi-writer/docs.html

看了下文档，使用很简单。

demo 例子

依据官网的介绍， js 库还是很好用的，引入一个 js 就可以了。

我写了一个接受文本输入框的输入、并显示对应汉字笔画的 demo ，代码如下：

https://www.ryw168.com/news/cases/15104.html

<html>

<head>

<title>展示汉字笔画的小页面</title>

var writer = null;

function show() {

var x = document.getElementById("name");

//首次渲染，创建汉字

if(writer == null){

writer = HanziWriter.create('grid-background-target', x.value, {

width: 200,

height: 200,

padding: 5,

showOutline: true

});

}else{//非首次，则修改为新的汉字

writer.setCharacter(x.value);

}

https://www.ryw168.com/news/cases/15105.html

//动画展示汉字笔画

writer.animateCharacter();

}

</script>

</head>

<body>

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

<button id="animate-button" onclick="show();">Animate</button>

<br/>

</svg>

</body>

</html>

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

运行结果

我在 GitHub 上放了一个静态网页，加上了这个 demo.

地址为： https://woodvine.github.io/resume.html#myworkshow

https://www.ryw168.com/news/cases/15106.html

后记

试了下这个汉字库，的确不错。突然发现有些字写了十几年竟然是错误的笔画，

比如 “毕”、“爽”、“匝”。看来汉字笔画学习还是应该从娃娃抓起啊。

ITPub博客

一个汉字笔画库 hanzi-writer 的小应用

最新文章