js移动端滑动解锁功能_javascript_ThinkSAAS
js移动端滑动解锁功能
js移动端滑动解锁功能
代码借鉴别人，修改成自己的需求
* Created by zdliu on .
(function () {
window.mlGesture = function (obj) {
this.height = document.documentElement.clientWidth * 0.8;
this.width = document.documentElement.clientWidth * 0.8;
this.gestureNum = obj.gestureNum || 3;
this.callback = obj.callback ||
mlGesture.prototype.drawCle = function (x, y) { // 初始化解锁密码面板
this.ctx.strokeStyle = '#CFE6FF';
this.ctx.lineWidth = 2;
this.ctx.beginPath();
this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.stroke();
mlGesture.prototype.drawPoint = function () { // 初始化圆心
for (var i = 0; i & this.lastPoint. i++) {
this.ctx.fillStyle = '#CFE6FF';
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
mlGesture.prototype.drawStatusPoint = function (type) { // 初始化状态线条
for (var i = 0; i & this.lastPoint. i++) {
this.ctx.strokeStyle =
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.stroke();
mlGesture.prototype.drawLine = function (po, lastPoint) {// 解锁轨迹
this.ctx.beginPath();
this.ctx.lineWidth = 3;
this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
//console.log(this.lastPoint.length);
for (var i = 1; i & this.lastPoint. i++) {
this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
this.ctx.lineTo(po.x, po.y);
this.ctx.stroke();
this.ctx.closePath();
mlGesture.prototype.createCircle = function () {// 创建解锁点的坐标，根据canvas的大小来平均分配半径
var n = this.gestureN
var count = 0;
this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算
this.lastPoint = [];
this.arr = [];
this.restPoint = [];
var r = this.r;
for (var i = 0; i & i++) {
for (var j = 0; j & j++) {
var obj = {
x: j * 4 * r + 3 * r,
y: i * 4 * r + 3 * r,
index: count
this.arr.push(obj);
this.restPoint.push(obj);
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
for (var i = 0; i & this.arr. i++) {
this.drawCle(this.arr[i].x, this.arr[i].y);
mlGesture.prototype.getPosition = function (e) {// 获取touch点相对于canvas的坐标
var rect = e.currentTarget.getBoundingClientRect();
var po = {
x: e.touches[0].clientX - rect.left,
y: e.touches[0].clientY - rect.top
mlGesture.prototype.update = function (po) {// 核心变换方法在touchmove时候调用
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
for (var i = 0; i & this.arr. i++) { // 每帧先把面板画出来
this.drawCle(this.arr[i].x, this.arr[i].y);
this.drawPoint(this.lastPoint);// 每帧花轨迹
this.drawLine(po, this.lastPoint);// 每帧画圆心
for (var i = 0; i & this.restPoint. i++) {
if (Math.abs(po.x - this.restPoint[i].x) & this.r && Math.abs(po.y - this.restPoint[i].y) & this.r) {
this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
this.lastPoint.push(this.restPoint[i]);
this.restPoint.splice(i, 1);
mlGesture.prototype.checkPass = function (psw1, psw2) {// 检测密码
var p1 = '',
for (var i = 0; i & psw1. i++) {
p1 += psw1[i].index + psw1[i].
for (var i = 0; i & psw2. i++) {
p2 += psw2[i].index + psw2[i].
return p1 === p2;
mlGesture.prototype.storePass = function (psw) {// touchend结束之后对密码和状态的处理
console.log(window.localStorage.getItem('gesturePassword')==null);
if (window.localStorage.getItem('gesturePassword') == null && psw.length & 4) {
document.getElementById('gestureTitle').innerHTML = '绘制解锁图案,至少连接4个点';
this.drawStatusPoint('red');
delete this.pswObj.
if (this.pswObj.step == 1) {
if (this.checkPass(this.pswObj.fpassword, psw)) {
this.pswObj.step = 2;
this.pswObj.spassword =
document.getElementById('gestureTitle').innerHTML = '密码保存成功';
this.drawStatusPoint('#2CFF26');
window.localStorage.setItem('gesturePassword', JSON.stringify(this.pswObj.spassword));
document.getElementById('gestureTitle').innerHTML = '两次不一致，重新输入';
this.drawStatusPoint('red');
delete this.pswObj.
} else if (this.pswObj.step == 2) {
if (this.checkPass(this.pswObj.spassword, psw)) {
document.getElementById('gestureTitle').innerHTML = '解锁成功';
this.drawStatusPoint('#2CFF26');
if (this.callback) {
this.callback && this.callback(JSON.stringify(this.pswObj.spassword));
var ml = document.getElementById("mlGesture");
document.body.removeChild(ml);
this.drawStatusPoint('red');
document.getElementById('gestureTitle').innerHTML = '解锁失败';
this.pswObj.step = 1;
this.pswObj.fpassword =
document.getElementById('gestureTitle').innerHTML = '再次输入';
mlGesture.prototype.makeState = function () {
if (this.pswObj.step == 2 && document.getElementById('gestureTitle')) {
document.getElementById('gestureTitle').innerHTML = '请解锁';
mlGesture.prototype.initDom = function () {
var wrap = document.createElement('div');
var str = '&h4 id="gestureTitle"style="color: #22C3AA;font-size:1padding-top:1.5"class="title"&绘制解锁图案,至少连接4个点&/h4&' +
'&canvas id="canvas"width="' + this.width + '"height="' + this.height + '"style="background-color: #305066;display: inline-"&&/canvas&';
wrap.setAttribute('style', 'position:top:0;left:0;right:0;bottom:0;z-index:9999;text-align:background-color: #305066;');
wrap.setAttribute('id', 'mlGesture');
wrap.innerHTML =
document.body.appendChild(wrap);
mlGesture.prototype.init = function () {
this.initDom();
this.pswObj = window.localStorage.getItem('gesturePassword') ? {
spassword: JSON.parse(window.localStorage.getItem('gesturePassword'))
this.lastPoint = [];
this.makeState();
this.touchFlag =
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.createCircle();
this.bindEvent();
mlGesture.prototype.reset = function () {
this.makeState();
this.createCircle();
mlGesture.prototype.bindEvent = function () {
var self =
this.canvas.addEventListener("touchstart", function (e) {
e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码
var po = self.getPosition(e);
//console.log(po);
for (var i = 0; i & self.arr. i++) {
if (Math.abs(po.x - self.arr[i].x) & self.r && Math.abs(po.y - self.arr[i].y) & self.r) {
self.touchFlag =
self.drawPoint(self.arr[i].x, self.arr[i].y);
self.lastPoint.push(self.arr[i]);
self.restPoint.splice(i, 1);
}, false);
this.canvas.addEventListener("touchmove", function (e) {
if (self.touchFlag) {
self.update(self.getPosition(e));
}, false);
this.canvas.addEventListener("touchend", function (e) {
if (self.touchFlag) {
self.touchFlag =
self.storePass(self.lastPoint);
setTimeout(function () {
self.reset();
}, false);
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发***微信