1.引入js檔案，名稱為 h5lock.js
複製**物件導向封裝）
(function
(); console.log(this.callback)
this.choosetype = number(window.localstorage.getitem('choosetype')) || obj.choosetype;
};h5lock.prototype.drawcle = function(x, y)
h5lock.prototype.drawpoint = function
() }
h5lock.prototype.drawstatuspoint = function(type)
}h5lock.prototype.drawline = function(po, lastpoint)
this.ctx.lineto(po.x, po.y);
this.ctx.stroke();
this.ctx.closepath();
};h5lock.prototype.createcircle = function
() ;
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.length ; i++)
//return arr;
};h5lock.prototype.getposition = function(e) ;
return po;
};h5lock.prototype.update = function(po)
this.drawpoint(this.lastpoint);// 每幀花軌跡
this.drawline(po , this.lastpoint);// 每幀畫圓心
for (var i = 0 ; i < this.restpoint.length ; i++) }};
h5lock.prototype.checkpass = function(psw1, psw2)
for (var i = 0 ; i < psw2.length ; i++)
return p1 === p2;
};h5lock.prototype.storepass = function(psw) else
} else
if (this.pswobj.step == 2)
console.log(this.lastpoint)
} else
}} else
};h5lock.prototype.makestate = function
() else
if (this.pswobj.step == 1) else
};h5lock.prototype.setchoosetype = function(type);
h5lock.prototype.updatepassword = function
(); document.getelementbyid('title').innerhtml = '繪製解鎖圖案';
this.reset();
};h5lock.prototype.initdom = function
()" height="$" style="background-color:$;display: inline-block;margin-top: 15px;">`;
wrap.setattribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');
wrap.innerhtml = str;
};h5lock.prototype.reset = function
() ;
h5lock.prototype.bindevent = function
() }
}, false);
this.canvas.addeventlistener("touchmove", function (e)
}, false);
this.canvas.addeventlistener("touchend", function (e) , 300);
}console.log(self.lastpoint)
}, false);
document.addeventlistener('touchmove', function(e),false);
document.getelementbyid('updatepassword').addeventlistener('click', function
());
};h5lock.prototype.init = function
() : {};
this.lastpoint = ;
this.makestate();
this.touchflag = false;
this.canvas = document.getelementbyid('canvas');
this.ctx = this.canvas.getcontext('2d');
this.createcircle();
this.bindevent();
};})();
複製**
new h5lock()
console.log(pasw-0, '*****=>data')
return
false //true
}}).init();
複製**
5.最後給個贊吧，熊跌！
iOS開發 19 手勢解鎖
m檔案 import zjlockview.h define kbtncount 9 inte ce zjlockview 儲存選中按鈕 property nonatomic,strong nsmutablearray selectedbtns 記錄當前點位置 property nonatomic,...
H5單頁面手勢滑屏切換原理
h5單頁面手勢滑屏切換是採用html5 觸控事件 touch 和 css3動畫 transform,transition 來實現的，效果圖如下所示，本文簡單說一下其實現原理和主要思路。1 實現原理 假設有5個頁面，每個頁面佔螢幕100 寬，則建立乙個div容器viewport，將其寬度 width ...
H5單頁面手勢滑屏切換原理
摘自 h5單頁面手勢滑屏切換是採用html5 觸控事件 touch 和 css3動畫 transform,transition 來實現的，效果圖如下所示，本文簡單說一下其實現原理和主要思路。1 實現原理 假設有5個頁面，每個頁面佔螢幕100 寬，則建立乙個div容器viewport，將其寬度 wid...