介绍

手势密码

整体思路

• 渲染出页面（即header和提示信息以及设置密码和验证密码
• 监测屏幕大小，获取canvas的宽和高，然后画出一张空白的canvas画布
• 计算出九个点的位置，然后将x , y 和是否被点击isTouched存在数组array中
• 在画布上渲染出九个圆圈
• 写touchstart事件，将触摸到的点和存在数组中的点去比较，然后判断是否在数组中的圆里面，如果在的话就将isTouched属性置为点击状态，然后将点击后的点存在havaTouched数组中，并在点击的圈上画出一个大圈
• 写touchmove事件，当我移动时要将画布清空然后重绘canvas和里面的点，点根据array数组中isTouched属性去画小圈和大圈
• 画线，将我存在已经被点击的数组haveTouched的第一个值作为起始点，然后获取我实时触摸的最后一个点，将它作为画线的终点，然后画线
• 触摸到存在array里面的小圈时画大圈，如果我移动的时候的touches在array数组的小圈里，则重新渲染画布，画出之前的小圈和大圈以及线
• 写touchend事件，当我手松开屏幕的时候判断松开的位置，如果在array数组中的小圈外，则重新渲染画布，将最后的一条线去掉
• 判断触摸到的点的个数，直接获取haveTouched的长度，如果小于５则更新提示信息为密码太短至少需要5个点，并将haveTouched数组清空，然后再重绘页面，反之提示请再次输入手势密码，并将第一次点到的圈存在firstHaveTouched数组里面，重绘画布，并将除firstHaveTouched的数组都清空。
• 第二次输入手势密码时，判断输入次数，然后再进行和第一次一样的画图，并把触摸过的圈记录在haveTouched里面，然后对比firstHaveTouched和haveTouched，如果一样则将数据存在localStorage里面，并更新提示信息为密码设置成功，反之更新提示信息为两次输入不一致
• 验证密码，点击验证密码时将画布重绘成刚开始的九个小圈，然后将所有的数组清空，然后画手势密码等与之前相同，获取到haveTouched数组之后与localStorage里面所存数据进行比对，如果相同则更新提示信息为密码正确！，反之更新提示信息为输入密码不正确！

运行

可以访问https://yangzhanmei.github.io/gesturePassword/index.html%60