來源:https://github.com/lvming6816077/H5lock
http://threejs.org/examples/
http://www.inf.usi.ch/phd/wettel/codecity-download.html (JSCity：把源碼可視化成建筑物的 JS 庫)
http://www.alloyteam.com/2015/07/html5-shi-xian-ping-mu-shou-shi-jie-suo/ (Web前端 騰訊AlloyTeam Blog?)
http://top.jobbole.com/22960/(JSCity：把源碼可視化成建筑物的 JS 庫)

JS:

(function(){window.H5lock = function(obj){this.height = obj.height;this.width = obj.width;this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;};H5lock.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();}H5lock.prototype.drawPoint = function() { // 初始化圓心for (var i = 0 ; i < this.lastPoint.length ; 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();}}H5lock.prototype.drawStatusPoint = function(type) { // 初始化狀態(tài)線條for (var i = 0 ; i < this.lastPoint.length ; i++) {this.ctx.strokeStyle = type;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();}}H5lock.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.length ; 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();}H5lock.prototype.createCircle = function() {// 創(chuàng)建解鎖點(diǎn)的坐標(biāo)，根據(jù)canvas的大小來平均分配半徑var n = this.chooseType;var count = 0;this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式計(jì)算this.lastPoint = [];this.arr = [];this.restPoint = [];var r = this.r;for (var i = 0 ; i < n ; i++) {for (var j = 0 ; j < n ; j++) {count++;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.length ; i++) {this.drawCle(this.arr[i].x, this.arr[i].y);}//return arr;}H5lock.prototype.getPosition = function(e) {// 獲取touch點(diǎn)相對(duì)于canvas的坐標(biāo)var rect = e.currentTarget.getBoundingClientRect();var po = {x: e.touches[0].clientX - rect.left,y: e.touches[0].clientY - rect.top};return po;}H5lock.prototype.update = function(po) {// 核心變換方法在touchmove時(shí)候調(diào)用this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);for (var i = 0 ; i < this.arr.length ; 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.length ; 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);break;}}}H5lock.prototype.checkPass = function(psw1, psw2) {// 檢測(cè)密碼var p1 = '',p2 = '';for (var i = 0 ; i < psw1.length ; i++) {p1 += psw1[i].index + psw1[i].index;}for (var i = 0 ; i < psw2.length ; i++) {p2 += psw2[i].index + psw2[i].index;}return p1 === p2;}H5lock.prototype.storePass = function(psw) {// touchend結(jié)束之后對(duì)密碼和狀態(tài)的處理if (this.pswObj.step == 1) {if (this.checkPass(this.pswObj.fpassword, psw)) {this.pswObj.step = 2;this.pswObj.spassword = psw;document.getElementById('title').innerHTML = '密碼保存成功';this.drawStatusPoint('#2CFF26');window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));window.localStorage.setItem('chooseType', this.chooseType);} else {document.getElementById('title').innerHTML = '兩次不一致，重新輸入';this.drawStatusPoint('red');delete this.pswObj.step;}} else if (this.pswObj.step == 2) {if (this.checkPass(this.pswObj.spassword, psw)) {document.getElementById('title').innerHTML = '解鎖成功';this.drawStatusPoint('#2CFF26');} else {this.drawStatusPoint('red');document.getElementById('title').innerHTML = '解鎖失敗';}} else {this.pswObj.step = 1;this.pswObj.fpassword = psw;document.getElementById('title').innerHTML = '再次輸入';}}H5lock.prototype.makeState = function() {if (this.pswObj.step == 2) {document.getElementById('updatePassword').style.display = 'block';//document.getElementById('chooseType').style.display = 'none';document.getElementById('title').innerHTML = '請(qǐng)解鎖';} else if (this.pswObj.step == 1) {//document.getElementById('chooseType').style.display = 'none';document.getElementById('updatePassword').style.display = 'none';} else {document.getElementById('updatePassword').style.display = 'none';//document.getElementById('chooseType').style.display = 'block';}}H5lock.prototype.setChooseType = function(type){chooseType = type;init();}H5lock.prototype.updatePassword = function(){window.localStorage.removeItem('passwordxx');window.localStorage.removeItem('chooseType');this.pswObj = {};document.getElementById('title').innerHTML = '繪制解鎖圖案';this.reset();}H5lock.prototype.initDom = function(){var wrap = document.createElement('div');var str = '<h4 id="title" class="title">繪制解鎖圖案</h4>'+'<a id="updatePassword" style="position: absolute;right: 5px;top: 5px;color:#fff;font-size: 10px;display:none;">重置密碼</a>'+'<canvas id="canvas" width="300" height="300" style="background-color: #305066;display: inline-block;margin-top: 15px;"></canvas>';wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');wrap.innerHTML = str;document.body.appendChild(wrap);}H5lock.prototype.init = function() {this.initDom();this.pswObj = window.localStorage.getItem('passwordxx') ? {step: 2,spassword: JSON.parse(window.localStorage.getItem('passwordxx'))} : {};this.lastPoint = [];this.makeState();this.touchFlag = false;this.canvas = document.getElementById('canvas');this.ctx = this.canvas.getContext('2d');this.createCircle();this.bindEvent();}H5lock.prototype.reset = function() {this.makeState();this.createCircle();}H5lock.prototype.bindEvent = function() {var self = this;this.canvas.addEventListener("touchstart", function (e) {e.preventDefault();// 某些android 的 touchmove不宜觸發(fā) 所以增加此行代碼var po = self.getPosition(e);console.log(po);for (var i = 0 ; i < self.arr.length ; i++) {if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {self.touchFlag = true;self.drawPoint(self.arr[i].x,self.arr[i].y);self.lastPoint.push(self.arr[i]);self.restPoint.splice(i,1);break;}}}, 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 = false;self.storePass(self.lastPoint);setTimeout(function(){self.reset();}, 300);}}, false);document.addEventListener('touchmove', function(e){e.preventDefault();},false);document.getElementById('updatePassword').addEventListener('click', function(){self.updatePassword();});} })();

　　HTML5:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>H5lock</title><style type="text/css">body {text-align: center;background-color: #305066;}.title {color: #22C3AA;}</style></head> <body> <script type="text/javascript" src="javascripts/H5lock.js"></script> <script type="text/javascript"> //http://www.nihaoshijie.com.cn/index.php/archives/537http://www.nihaoshijie.com.cn/index.php/archives/537/* http://top.jobbole.com/22960/http://threejs.org/examples/ http://www.inf.usi.ch/phd/wettel/codecity-download.html https://github.com/lvming6816077/H5lock http://www.alloyteam.com/2015/07/html5-shi-xian-ping-mu-shou-shi-jie-suo/*/ new H5lock({chooseType: 3 }).init(); </script> </body> </html>

　　

微軟在MIT下開源DirectX工具集最新開源的軟件包括了：DirectX Tool Kit，DirectXTex，DirectXMesh，UVAtlas，Effects 11，DXUT11，Sample Content Exporter等等。

http://extjs.org.cn/node/699
隨著Web技術(shù)的不斷發(fā)展，前端開發(fā)框架層出不窮，各有千秋，開發(fā)者在做技術(shù)選型時(shí)總是要費(fèi)一番腦筋，最近，IBM高級(jí)工程師王芳俠撰文對(duì)Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 個(gè)國內(nèi)外前端開發(fā)框架進(jìn)行了比較詳細(xì)的比較，非常值得讀者借鑒。
http://www.infoq.com/cn/news/2014/05/web-ui-framework

從國外的桌面端框架來說，作者認(rèn)為主要有以下幾個(gè)：

• Bootstrap主要針對(duì)桌面端市場(chǎng)，Bootstrap3 提出移動(dòng)優(yōu)先，不過目前桌面端依然還是 Bootstrap 的主要目標(biāo)市場(chǎng)。Bootstrap 主要基于 jQuery 進(jìn)行 JavaScript 處理，支持 LESS 來做 CSS 的擴(kuò)展。如果想要在 Bootstrap 框架中使用 Sass，則需要通過 Bootstrap-Sass項(xiàng)目增加兼容。Bootstrap 框架在布局、版式、控件、特效方面都非常讓人滿意，都預(yù)置了豐富的效果，極大方便了用戶開發(fā)。在風(fēng)格設(shè)置方面，還需要用戶在下載時(shí)手動(dòng)設(shè)置，可配置粒度非常細(xì)，相應(yīng)也比較繁瑣，不太直觀，需要對(duì) Bootstrap 非常熟悉配置起來才能得心應(yīng)手。
• jQuery UI是 jQuery 項(xiàng)目組中對(duì)桌面端的擴(kuò)展，包括了豐富的控件和特效，與 jQuery 無縫兼容。同時(shí)，jQuery UI 中預(yù)置了多種風(fēng)格供用戶選擇，避免了千篇一律。如果您對(duì)預(yù)置的風(fēng)格不滿意，還可以通過 jQuery UI 的可視化界面，自助對(duì) jQuery UI 的顯示效果進(jìn)行配置，非常方便，夠高端大氣上檔次。
• Sencha Ext JS是 Sencha 基于 Ext JS 開發(fā)的前端框架，內(nèi)容極其豐富，控件、特效等支持非常非常豐富，表格、圖畫、報(bào)告、布局、甚至數(shù)據(jù)連接，無所不包。只有您想不到，沒有它辦不到。基于 Sass 和 Compass，使得用戶對(duì)格式的修改和特效制作更加方便。商業(yè)化是 Sencha 的另一把利劍。幫助 Sencha 披荊斬棘之時(shí)，也把大把的碼農(nóng)砍在馬下。Sencha 規(guī)定，凡是商業(yè)化的應(yīng)用，都需要付費(fèi)。另外，Sencha 的輔助產(chǎn)品也全部收費(fèi)，否則只能是試用版。
• Dojo，目前唯一能與 Sencha Ext JS 一較高下的框架就只有 Dojo了。抱著 IBM、VMWare 等眾多大腿，Dojo 的一顰一笑都額外惹人注目。Dojo 項(xiàng)目的產(chǎn)品線和功能也特別豐富。首先，Dojo 有自己的 DOM 解析器 Nano，是 DOM 解析和處理的內(nèi)核。此外，Dojo 的 Web 框架有非常豐富的布局、版式、控件以及特效，對(duì)多語言以及圖表的擴(kuò)展支持都非常好，并支持對(duì)地圖的操作。大家可以查看它的演示，與 Ext JS 的效果進(jìn)行比較。此外，Dojo 還有自己的圖形化設(shè)計(jì)和開發(fā)工具 Maqetta，可以通過拖拽實(shí)現(xiàn)設(shè)計(jì)。Dojo 的風(fēng)格設(shè)置不是在下載的時(shí)候指定的，而是通過引用不同的 CSS 格式來實(shí)現(xiàn)。
• Mootools可以說是目前最輕量級(jí)的前端框架，內(nèi)核 js 壓縮完之后只有 8k，完整版壓縮之后也不到 100k，遠(yuǎn)比其他框架要小很多。Mootools 有自己的面向?qū)ο笤O(shè)計(jì)的內(nèi)核 Mootools Core。伴隨著最小的文件大小，框架的功能比其他框架也要弱不少，只有在控件和特效上有少量支持。
• Prototype JS也是一個(gè)簡(jiǎn)潔的框架，有著豐富的對(duì) DOM 操作的功能，對(duì) Ajax 和 JSON 支持得都非常好，在使用上與 jQuery 相比也相差不多。作為 Rails 默認(rèn)的 JavaScript 框架，相信對(duì)廣大開發(fā)人員也很有借鑒意義的。
• YUI作為開源前端框架的鼻祖，在框架上的功力非常之深。有著自己的解析 DOM 的核心框架，并且在特效、動(dòng)畫、圖表等方面都有豐富的擴(kuò)展，并可以通過 YQL 直接訪問 Yahoo！的數(shù)據(jù)。在用戶經(jīng)常使用的功能方面都有著不錯(cuò)的表現(xiàn)。與 jQuery 靈活的語法相比，YUI 顯得更加中規(guī)中矩，在代碼組織、結(jié)構(gòu)和模式方面都更加講究，更體現(xiàn)出工程師的嚴(yán)謹(jǐn)。

對(duì)于國內(nèi)的前端開發(fā)框架，作者也做了分析：

• Kissy是阿里集團(tuán)自主開發(fā)的前端框架，目前在淘寶網(wǎng)、一淘網(wǎng)等阿里系網(wǎng)站上得到不少應(yīng)用。Kissy 框架模仿 jQuery 編寫了自己的內(nèi)核 Kissy Core，用于對(duì) DOM 的解析，Ajax 處理等。同時(shí)，有著豐富的控件，并實(shí)現(xiàn)了一些動(dòng)畫效果和特效。同樣，在 Kissy 的控件中也可以看到 Bootstrap 等國外框架的影子。此外，Kissy abc 項(xiàng)目工具可以幫助用戶實(shí)現(xiàn)自動(dòng)化構(gòu)建，并有很多擴(kuò)展組件方便用戶使用。
• Qwrap是百度有啊團(tuán)隊(duì)推出的 JavaScript 框架，現(xiàn)在被收入 360，被廣泛應(yīng)用與 360 產(chǎn)品中。Qwrap 綜合 jQuery、Prototype、YUI 特點(diǎn)，對(duì) JavaScript 進(jìn)行了封裝。但是，如果要把 Qwrap 算成一個(gè)前端開發(fā)框架還是有些牽強(qiáng)，因?yàn)槌?JavaScript 類庫之外，Qwrap 基本乏善可陳，還處于發(fā)展階段。
• Tangram是百度推出的另一個(gè) JavaScript 框架，被廣泛應(yīng)用于百度系旗下的產(chǎn)品，與 Qwrap 類似，Tangram 也只能算是一個(gè) JavaScript 框架，對(duì) JavaScript 做了不少擴(kuò)展，但是作為前端開發(fā)框架還是顯得比較單薄。基于此，百度公司繼續(xù)推出了兩個(gè)基于 Tangram 的項(xiàng)目，Magic 和 Baidu Template。

?http://www.infoq.com/cn/news/2014/05/web-ui-framework

?

?

2015 年最棒的 5 個(gè) HTML5 框架
http://www.oschina.net/translate/top-html5-frameworks-in-2015?print

1.ionic http://ionicframework.com/
https://github.com/driftyco
Advanced HTML5 mobile development framework and SDK. Build incredible mobile apps with web technologies you already know and love. Best friends with AngularJS.

2.Siimpler
Siimpler enables you to build your HTML5 starting boilerplate by selecting the parts which you want to include.
http://siimpler.com/

3.Foundation
http://foundation.zurb.com/

4.LimeJS
LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and
desktop browsers.
http://www.limejs.com/

5.Enyo
http://enyojs.com/
Use Enyo to develop apps for all major platforms, from phones and tablets to PCs and TVs

https://github.com/enyojs

轉(zhuǎn)載于:https://www.cnblogs.com/geovindu/p/4694108.html

總結(jié)

以上是生活随笔為你收集整理的HTML5实现屏幕手势解锁(转载)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。