移动端设备-手机手势密码（UI组件）

定义一个id为“container”的div，自适应屏幕高与宽。定义组件对象phoneLock，调用对象的初始化方法，并开始执行。

加载id为“container”的div，将其高与宽赋给组件对象phoneLock

为组件添加各种控件，并加入毛玻璃效果，使界面具有立体感；

为组建对象设置属性；

绘制九个大圆；

绑定事件。

根据题意，定义每行每列各3个大圆，根据屏幕宽设置canvas的高宽、大圆的半径（r）和圆与圆之间的间距（设为了2*r），据此判断每个大圆的圆心坐标，调用 createBigCircle方法 绘制大圆。

当点击设置密码的按钮时，动态变化提示栏（id为“info”的babel）的信息，并设置属性verFlag和radioVerP为false(说明目前不是验证密码阶段)，radioSetP属性为true（说明目前正设置密码）。

当点击验证密码的按钮时，动态变化提示栏的信息，与对设置密码的事件监听一样，设置前面提及的三个属性。

开始：事件类型为touchstart，表示事件开始，为判断手指触及屏幕时所在位置是否在大圆内，以便判断是否用小圆填充该大圆，调用getPosition方法，若手指触发事件发生在大圆内，则更新aftPoint数组和remainPoint数组和判断手指移动的标志属性touchFlag为真。

手指移动：不断地监听过程中手指触及屏幕时的位置，在touchFlag属性为真的前提下，判断触碰到哪些大圆范围内，调用update方法进行更新。更新时，首先要清除画布内容，重新将画布进行初始化，根据数组aftPoint和remainPoint来绘制填充大圆的小圆，以及相关的连线。

结束：在touchFlag属性为真时，重置其为假（表明手指绘制密码事件已经结束）。不管是“设置密码阶段”还是“验证密码阶段”，都会对刚生成的密码进行密码长度的验证，调用verMinLengthP方法（其中调用了dealPass方法对传参的数组中的对象进行处理，提取出密码）。

若密码长度符合题意，至少为5，则之后对verFlag属性、radioSetP属性和radioVerP属性的布尔值进行读取，以判断目前所处阶段是“设置密码阶段”还是“验证密码阶段”。

若为“设置密码阶段”，则读取setNum属性，判断是第一次输入密码（则提示再次输入密码）还是第二次输入密码（则判断两次的密码是否一致，若一致，则提示密码设置成功并更新localStorage对象，否则，重置为等待再次输入）。

若为“验证密码阶段”，则从localStorage对象中读取密码，验证localStorage对象中的密码和刚刚事件中生成的密码是否一样，若一样，则提示密码正确，否则，提示输入的密码不正确。

为避免每次用户绘制密码之后，绘制的密码一直显示在界面上的问题，还需要使用setTimeout调用reset方法，将界面进行重置，以提高用户体验。