html5如何实现手势解锁(html5,开发技术)

原生实现还是其它方式实现？

1、使用 android 和 ios 对应的平台通过原生代码来写手势解锁插件。体验好，但是开发周期长，需要处理各平台的兼容性问题，并且需要学习apicloud平台插件编写方法。（放弃）

2、使用 html5 的 canvas 画布来实现。开发周期短，不需要过多的处理兼容性问题，体验好。（选择）

原理分析

手势解锁

通过手指将屏幕上的九个点依次连接起来形成一个图案，所以叫图案解锁。如上图每一个解锁圆圈后面其实都是一个数字，每次比较的并不是是用户画出来的图案，而是每次手指经过图案时串联起来的圆圈下的数字组成的密码字符串，本质上我们比较的还是字符串的密码，只不过站在用户的角度看是绘制出来的图案。图案的记忆远比数字字符串记的牢固。

实现步骤

绘制密码盘

密码盘的绘制比较简单，唯一需要注意需要通过动态计算使九个点围成的正方式始终在屏幕的中间位置，在手机上还需要减去状态栏的高度。

绘制连线

绘制连线的方法

绑定事件

连线的过程就是将 3 个 touch（移动端） 事件组合起来获取当前位置的坐标放入数组中，然后将这些坐标渲染到界面上的过程。

touchstart (mousedown) 当手指（鼠标）按下时设置 isMouseDown=true，同时将该点的坐标保存到线条数组中，并将数组中的点绘制出来。

touchmove (mousemove) 当 isMouseDown=true 时 将手指（鼠标）移动过程中所有的坐标点都保存到萧条数组中，并将数组中的点绘制出来。

mouseup (mouseup) 当手指（鼠标）松开后设置 isMouseDown=fasle.将数组中的所有点绘制出来，清空 pointerArr 数组，然后比较连接的点的数量如果小于 6（自己设置，一般密码 6 位以上）给一个密码长度不够的提示，清空 puts 数组，重新调用 init 方法初始化界面，如果大于等于 6 则密码设置成功。

实现解锁逻辑

通过上面几步的操作，九宫格解锁每一次绘图之后的数据和显示效果都有了，现在只需要在关键地方添加相应逻辑代码就可以了，这里主要介绍它的实现逻辑就不对代码做封装了。

相关代码