//竖屏
} else {
lockCicle.x = (width / 4) * j;
lockCicle.y = (width / 4) * i + Math.abs(offset);
lockCicle.state = 0;
}
arr.push(lockCicle);
}
}
//初始化界面的方法
function init() {
ctx.clearRect(0, 0, width, height); //清空画布
pointerArr = []; //清楚绘制路径
for (var i = 0; i < arr.length; i++) {
arr[i].state = 0; //清除绘制状态
drawPointer(i);
}
}
//绘制九宫格解锁界面
function drawPointer(i) {
ctx.save();
var radius = 0;
if (hastouch) {
radius = width / 12;
} else {
radius = 24;
}
var _fillStyle = "#dd514c";
var _strokeStyle = "#dd514c";
//不同状态显示不同颜色
if (arr[i].state == 1) {
_strokeStyle = "#1bd6c5";
}
//绘制原点
ctx.beginPath();
ctx.fillStyle = _fillStyle;
ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
//绘制圆圈
ctx.beginPath();
ctx.strokeStyle = _strokeStyle;
ctx.lineWidth = 0.3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.arc(arr[i].x, arr[i].y, radius, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//初始化界面
init();
绘制连线
绘制连线的方法
var pointerArr = []; //连接线点的坐标数组
var startX, startY; //线条起始点
var puts = []; //经过的九个点的数组
var currentPointer; //当前点是否已经连接
var pwd = []; //密码
var confirmPwd = []; //确认密码
var unlockFlag = false; //是否解锁的标志/**
** 绘制链接线的方法，将坐标数组中的点绘制在canvas画布中
**/
function drawLinePointer(x, y, flag) {
ctx.clearRect(0, 0, width, height);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#1bd6c5";
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
for (var i = 0; i < pointerArr.length; i++) {
if (i == 0) {
ctx.moveTo(pointerArr[i].x, pointerArr[i].y);
} else {
ctx.lineTo(pointerArr[i].x, pointerArr[i].y);
}
}
ctx.stroke();
ctx.closePath();
ctx.restore();
for (var i = 0; i < arr.length; i++) {
drawPointer(i); //绘制圆圈和原点
if (ctx.isPointInPath(x, y) && currentPointer != i) {
//判断鼠标点击是否在圆中
pointerArr.push({
x: arr[i].x,
y: arr[i].y
});
currentPointer = i;
puts.push(i + 1);
startX = arr[i].x;
startY = arr[i].y;
arr[i].state = 1;
}
}
if (flag) {
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-over";
ctx.strokeStyle = "#e2e0e0";
ctx.lineWidth = 5;
