纯JavaScript代码实现移动设备绘图解锁

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生，在移动设备上，用户可以通过设置锁定图案作为密码对设备用户界面进行锁定，锁定界面如下图所示。
效果图如下所示

JavaScript Code

<script>$（"#gesturepwd"）.GesturePasswd（{ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF",//主要的控件颜色 roundRadii:50,//大圆点的半径 pointRadii:12, //大圆点被选中时显示的圆心的半径 space:60, //大圆点之间的间隙 width:480,//整个组件的宽度 height:480, //整个组件的高度 lineColor:"#ECF0F1",//用户划出线条的颜色 zindex :100 //整个组件的css z-index属性 }）;$（"#gesturepwd"）.on（"hasPasswd",function（e,passwd）{ var result;if（passwd == "1235789"）{ result=true;} else {result=false; } if（result == true）{$（"#gesturepwd"）.trigger（"passwdRight"）;setTimeout（function（）{ //密码验证正确后的其他操作，打开新的页面等。。。 alert（"Pattern is correct"）},500）; //延迟半秒以照顾视觉效果 } else{$（"#gesturepwd"）.trigger（"passwdWrong"）;//密码验证错误后的其他操作。。。 }}）; </script>

以上代码也很简单吧，纯js代码实现移动设备绘图解锁，当然这是核心代码，其他的还需要小伙伴们根据自己的需求自行发挥。希望本文分享能给大家帮助。