前言
最近做的一个app项目使用的 apicloud 来实现跨平台开发，现在需要为这个 app 添加手势（九宫格）解锁的功能，apicloud 已经有一些第三方的原生实现的手势解锁插件，因为是原生的性能也比较好，调用也比较方便，但是都不能对它们的样式做修改，所以就打算自己来实现这个功能。这篇文章将实现过程整理分享出来，希望有需要的可以了解。分享出来的代码只实现了最基本的
设置密码功能 、
解锁功能 、
比较密码 的功能等，一些高级功能例如:不能限制一个点最多经过多少次、限制用户设置密码的长度。
原生实现还是其它方式实现？
1、使用 android 和 ios 对应的平台通过原生代码来写手势解锁插件。体验好，但是开发周期长，需要处理各平台的兼容性问题，并且需要学习apicloud平台插件编写方法。（放弃）
2、使用 html5 的 canvas 画布来实现。开发周期短，不需要过多的处理兼容性问题，体验好。（选择）
原理分析
手势解锁
通过手指将屏幕上的九个点依次连接起来形成一个图案，所以叫图案解锁。如上图每一个解锁圆圈后面其实都是一个数字，每次比较的并不是是用户画出来的图案，而是每次手指经过图案时串联起来的圆圈下的数字组成的密码字符串，本质上我们比较的还是字符串的密码，只不过站在用户的角度看是绘制出来的图案。图案的记忆远比数字字符串记的牢固。
实现步骤
绘制密码盘
密码盘的绘制比较简单，唯一需要注意需要通过动态计算使九个点围成的正方式始终在屏幕的中间位置，在手机上还需要减去状态栏的高度。
var width = $(document).width();
var height = $(document).height() - 40; //减去手机状态栏的高度//九宫格其实就是九个点，9个点的坐标对象
var lockCicle = {
x: 0, //x坐标
y: 0, //y坐标
color: "#999999",
state: "1" //状态当前点是否已经被链接过
};
var offset = (width - height) / 2; //计算偏移量
var arr = []; //九个点的坐标数组
//计算九个点坐标的方法
for (var i = 1; i <= 3; i++) {
//每一行
for (var j = 1; j <= 3; j++) {
//每一行的每一个
var lockCicle = {};
//横屏
if (offset > 0) {
lockCicle.x = (height / 4) * j + Math.abs(offset);
lockCicle.y = (height / 4) * i;
lockCicle.state = 0;
