移动端手势密码

首先进行技术选型，我个人比较青睐canvas：

最后我决定创建三重画布，当然上面的一切其实都是静态的，但事件和交互赋予了他们生命,第一层canvas为最后一条活动的线，第二层canvas为特殊颜色的圆以及圆中的图片，第三层为背景圆基本不动

设置监听touch事件三部曲，针对不同的鼠标移动进行不同层canvas的刷新，过程中进行函数节流

进行功能的逻辑判断，这个只要记录下状态进行比对就没问题了  

1.熟悉canvasAPI，制作出界面以及基本动画效果，3月25日前完成（3.25）
2.完善所需数据组合，完成设锁逻辑和解锁逻辑，3月27日前完成（好像稍微加了一些封装哦 3.27）
3.完成各部分解耦封装，只保留统一接口供调用，并提供适当扩展参数选项，3月29日前完成（好像稍微提前了一些哦 3.28）
4.改善UI并适当改善逻辑（逻辑应该还有改善余地，UI更是，未完待续 3.29）
5.改善代码细节问题，规范化
6.追加：canvas渲染机制分层，API改良（暴露过程行为和外观）

new lockr({ customStyle: false, //boolean 是否自定义样式     checkBtn: document.querySelector('#testRadio'),             //check单选框     updataBtn: document.querySelector('#setRadio'),             //updata单选框     hint: document.querySelector('#hint'),                     //消息提示框     background: 'url("background2.jpeg")',                     //url   container背景     textColor: '#fff',                                         //文字颜色     rightColor: '#8cf939',                                     //选择正确后空心圆的颜色     wrongColor: '#fb4920',                                     //选择错误后空心圆的颜色 canvasWidth: false, //是否自定义canvas宽度     chooseType: 3,                                             //手势密码圆数量 默认为3*3     render: true,                                               //自动渲染 originR: 0.3, //半径占圆心距的比例     customFilledPicUrl: `./yellowMan/filledPic.png`,           //填充空心圆图片相对路径，filledPic + index确认唯一图片---形如`./yellowMan/filledPic${index}.png`     customFilledPicNumber: 19,                                 //填充空心圆图片的总数     minPoint: 5,                                               //手势密码的最小连接数目 })