canvas手势解锁思路

参考：http://web.jobbole.com/90970/

基本要求是这样的：将密码保存到 localStorage 里，开始的时候会从本地读取密码，如果没有就让用户设置密码，密码最少为五位数，少于五位要提示错误。需要对第一次输入的密码进行验证，两次一样才能保持，然后是验证密码，能够对用户输入的密码进行验证。

具体思路如下：

一：新建画布，指定宽度，每行排列3个圆，计算圆的半径，根据半径确定圆心。用arc（x,y,r,0,2*PI,true）函数画圆；

二：初始化密码，如果window.localStorage.getItem("HandLock")存在密码，则切换到model=1,验证密码；否则为{model:2}，设置密码；

三：监听touchstart事件，touchmove事件，touchend事件

touchstart事件:获取触点的相对位置，清空touchedCircle数组，判断触点是否在圆内，若在添加在touchedCircle数组中，同时从restCirle数组中删除，每次是对restCirle数组进行

遍历，防止重复添加，然后设置touchFlag和redraw为true。

touchmove事件（添加节流函数）：通过一个变量保存触点位置，判断触点的touchFlag属性，如果为true则：如果touchedCircle的长度大于等于1，则圆心与触点连线，然后将判断触点是否在圆内，若redraw为true则画实心圆，如果touchedCircle的长度大于等于2,则两个实心圆之间连线，将redraw重置为false；

否则判断该触点是否在圆内。

touchend事件：清除动态画布，防止有多余线出现。判断是哪个模式分别处理：

模式一：验证密码，将localstorage中值转为数组与touchedCircle长度比较，相等则循环比较每个圆的编号，都相等，则验证通过，否则密码错误。

模式二：设置密码，如果touchedCircle数组长度小于5则提示重新输入，否则新建临时数组保存设置密码值,和确认密码时比较，切换到模式三。

模式三：确认密码，首先将临时数组保存值与touchedCircle值比较，若相等则验证通过，将值保存在localstorage中，否则验证不通过，切换到模式二，重新设置。

(2)将touchFlag重置为false，并且将两个数组touchedCircle和restCirle初始化。
(3)重绘画布（静态和动态画布都清除）。

优化两点：

一、减少重绘次数

两个canvas：1.静态canvas:画实心圆及两个圆之间的连线。

2.上面的canvas画圆心与触点之间连线

二、解决touchmove频繁触发

这个时候我想到了防抖动和节流，首先防抖动肯定是不行的，万一我一直处于 touch 状态，重绘会延迟死的，这个时候节流会好一些。防抖和节流。

具体：在延迟为 delay 的时间内，如果函数再次触发，则重新计时，这个功能和防抖动是一样的，第三个参数 mustRun 是一个时间间隔，表示在时间间隔大于 mustRun 后的一个函数可以立即直接执行。

节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。

节流（Throttling）

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。

这个时候，我们希望即使页面在不断被滚动，但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，就要用到另一种技巧，称为节流函数（throttling）。

节流函数，只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。

与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。