Demo - canvas实现设置、验证九宫格手势密码

报了360前端实习生的岗，除了测评、考试外还要做个大作业 25号考的技术综合的选择题简直让我开始怀疑人生哇 ╥﹏╥ 然后大作业我拿到的题目就是介个，实现手势密码的输入以及验证

Demo演示地址

github传送门

思路

graph TD
    A[根据原型图拆分布局]
    A --> | top-bar | B[顶部标题]
    A --> | canvas | C[手势绘制区域]
    A --> | Msg | D[提示信息]
    A --> | radio-group | E[单选按钮组]

顶部标题

在viewport完美视口下，固定div高度，宽度100%，文字居中则能完成适配~

手势绘制区域

这里让绘制区域宽度去自适应，控制变量法嘛~

1. 设置默认属性。包括图形区域与屏幕的边距、圆半径、canvas高度（offsetX、offsetY、R、CanvasHeight）

2. 动态获取窗口可见宽度作为canvas宽度，计算圆的间隔距离

3. 根据上述参数计算九个点的原点位置

4. 绘制九个圆点

5. 绑定touch三个事件并响应。绘制密码记录在LinePoint数组里

   1. touchstart 时判断当前触摸点和圆点的距离是否小于圆的半径，如果为真则记录当前圆点

   2. touchmove 同样判断触摸点与圆点距离，并在绘制过程中根据记录数据绘制线条

   3. touchend 判断绘制密码是否符合规范，并根据单选框状态做出相应事件相应

提示信息

不同状态下提示用户操作

单选按钮组

未选择任一按钮时，提示用户选择

1. 设置密码

   1. 首次输入时，记录首次绘制密码

   2. 二次输入时，判断是否匹配首次绘制密码。若匹配，则存入localStorage或Cookie

2. 验证密码

   1. 从localStorage或Cookie获取到密码，判断是否匹配

   2. 未获取到密码，输出提示

若中途变更单选按钮，重置临时存储的绘制密码及判断是否首次输入的状态，防止误操作可能出现的bug~