很多少儿英语启蒙学习的程序都有26个英文字母大小写笔画绘制的功能。小朋友可以跟着提示，一第一笔的将一个字母写出来。这里解析一下该功能实现流程。
有一些初步的预想后，参考了竞品，流利说少儿英语，lingokids等。
对流利说少儿英语的分析
流利说的字母笔画教学，每一笔看起来都很自然，就像是人手写的一样，仔细看会发现，每一次写同一个字母写出来的字都是一模一样的，其实它是有一些预设的轨迹，当用户的触点经过某些关键座标点的时候，把对应的预设轨迹绘制出来。不过简单的将这些点连起来，看起来不会很自然：绘制的笔画可能会压到某一笔边框上面去，甚至写到边框外面。所以在真正实现的时候，除了最底层的一个字母底图，还会有上层的一个中空的字母图盖在上面，我们在两层图片中间进行绘制，这样即使我们的绘制轨迹有少许的不规则，也被上层图片给盖住了，理想情况下，绘制出来的字母会跟上层边框的形状一样，这里就需要设计的很大的工作量了。解压流利说少儿英语的apk，可以找到他完整的字母图片素材，以及关键座标点和轨迹座标点。写了脚本，将这些数据提取出来，还原流利说的绘制过程，最终绘制出来的效果，跟流利说的基本一致。当然我们只是参考他的设计思路，我们的实现也跟他们不一样。流利说少儿英语字母笔画绘制功能还原：
基本实现思路
我们采取的方案，思想也基本类似，上下两层图片，在中间进行绘制。
理论上讲，只要我们的笔画比上层图片中空的区域更粗，绘制出来的最终图案，就会跟设计预设的图案一样。
光滑曲线绘制
然而实际上如果我们绘制出来的曲线比上层图片中空区域更粗的话，虽然最终绘制出来的效果中空区域被涂满之后跟预期一致，但在绘制的过程中，涉及到两笔交汇的地方，就会出现把第一笔填满，然后在第二笔中溢出的现象，很不精致，所以我们的笔触必须比外面中空的区域更细。那么我们就得保证我们绘制出来的曲线是光滑的，不能直接把关键点连接起来，这样绘制出来会有很多毛刺，就需要用到一些曲线绘制算法，经过多个点的平滑曲线绘制。可以参考：http://scaledinnovation.com/analytics/splines/aboutSplines.html
触碰点采样精度问题
解决了平滑曲线绘制的问题之后，要解决canvas的move事件采样精度的问题。采样精度跟设备有关系，也跟我们手指滑动的速度有关系。我们划的很快，那我们可能就跳过了中间的好几个点，绘制过程就可能被打断。所以我们绘制到某一个点的时候，会记录下这一个点是第几笔第几个点，然后当下一次move事件触发，我们会检测这个点的后面好几个点，同时判断距离上一个已绘制核心点的距离，使我们的轨迹刚好绘制到最近的核心点处，这样能够一定程度上解决划太快和采样精度太稀疏的问题。
容错性
这个功能是给小孩子使用的，判断错误不能那么严苛。不一定要触碰到了核心点，沿着字母比划外面一定区域内绘制，手指没有在字母上，只要方向是正确的，我们也会绘制出正确的轨迹，当然不能偏的太离谱，可以通过增大判断触碰点是不是在核心点周围的距离范围实现这一点。在一笔结束和下一笔开始中间的绘制，也不会判错。一笔的最后一两个点，我们可以允许跳过，自动补全。距离上一个绘制点一定区域内都不判错。实现这些之后可以让小朋友也能够很轻松的完成绘制，达到教学的目的。
核心座标点的获取
还有一个很大的工作组成，是设计如何给我们提供这些关键座标点的数据。设计绘制出路径，路径上的点的密度和大小是可以控制的,设置路径上的每一个点都是1px*1px的大小。 然后将带有每个字母的路径的设计稿上传到蓝湖。 我们拉取蓝湖的数据接口，写脚本从蓝湖标注的座标数据中，过滤出路径上的点的关键点座标，再进行一些座标换算和排序，就可以拿到需要的关键座标点。 最后根据实现出来的效果可能需要一些补点，使绘制出来的字母更完美。
经过以上步骤，就基本完成了字母笔画绘制教学功能。git地址：英语字母笔画绘制功能解析