來源: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) { // 初始化狀態線條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() {// 創建解鎖點的坐標，根據canvas的大小來平均分配半徑var n = this.chooseType;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 < 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點相對于canvas的坐標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時候調用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) {// 檢測密碼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結束之后對密碼和狀態的處理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 = '請解鎖';} 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不宜觸發 所以增加此行代碼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技術的不斷發展，前端開發框架層出不窮，各有千秋，開發者在做技術選型時總是要費一番腦筋，最近，IBM高級工程師王芳俠撰文對Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 個國內外前端開發框架進行了比較詳細的比較，非常值得讀者借鑒。
http://www.infoq.com/cn/news/2014/05/web-ui-framework

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

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

對于國內的前端開發框架，作者也做了分析：

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

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

?

?

2015 年最棒的 5 個 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

轉載于:https://www.cnblogs.com/geovindu/p/4694108.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。