摘要：畫線畫線需要借助來完成，也就是，當我們的時候，傳入開始時的相對坐標，作為線的一端，當我們的時候，獲得坐標，作為線的另一端，當我們的時候，開始畫線。有兩個函數(shù)，獲得當前的相對坐標獲得觸摸點的相對位置相對坐標畫線畫線然后就是監(jiān)聽的和事件了。

最近參加 360 暑假的前端星計劃，有一個在線作業(yè)，截止日期是 3 月 30 號，讓手動實現(xiàn)一個 H5 手勢解鎖，具體的效果就像原生手機的九宮格解鎖那樣。

實現(xiàn)的最終效果就像下面這張圖這樣：

基本要求是這樣的：將密碼保存到 localStorage 里，開始的時候會從本地讀取密碼，如果沒有就讓用戶設置密碼，密碼最少為五位數(shù)，少于五位要提示錯誤。需要對第一次輸入的密碼進行驗證，兩次一樣才能保持，然后是驗證密碼，能夠對用戶輸入的密碼進行驗證。

掃碼在線查看：

或者點擊查看手機版。

項目 GitHub 地址，H5HandLock。

首先，我要說明一下，對于這個項目，我是參考別人的，H5lock。

我覺得一個比較合理的解法應該是利用 canvas 來實現(xiàn)，不知道有沒有大神用 css 來實現(xiàn)。如果純用 css 的話，可以將連線先設置 display: none，當手指劃過的時候，顯示出來。光設置這些應該就非常麻煩吧。

之前了解過 canvas，但沒有真正的寫過，下面就來介紹我這幾天學習 canvas 并實現(xiàn) H5 手勢解鎖的過程。

我這里用了一個比較常規(guī)的做法：

(function(w){
  var handLock = function(option){}

  handLock.prototype = {
    init : function(){},
    ...
  }

  w.handLock = handLock;
})(window)

// 使用
new handLock({
  el: document.getElementById("id"),
  ...
}).init();

常規(guī)方法，比較易懂和操作，弊端就是，可以被隨意的修改。

傳入的參數(shù)中要包含一個 dom 對象，會在這個 dom 對象內創(chuàng)建一個 canvas。當然還有一些其他的 dom 參數(shù)，比如 message，info 等。

關于 css 的話，懶得去新建文件了，就直接內聯(lián)了。

MDN 上面有個簡易的教程，大致瀏覽了一下，感覺還行。Canvas教程。

先創(chuàng)建一個 canvas，然后設置其大小，并通過 getContext 方法獲得繪畫的上下文：

var canvas = document.createElement("canvas");
canvas.width = canvas.height = width;
this.el.appendChild(canvas);

this.ctx = canvas.getContext("2d");

然后呢，先畫 n*n 個圓出來：

createCircles: function(){
  var ctx = this.ctx,
    drawCircle = this.drawCircle,
    n = this.n;
  this.r = ctx.canvas.width / (2 + 4 * n) // 這里是參考的，感覺這種畫圓的方式挺合理的，方方圓圓
  r = this.r;
  this.circles = []; // 用來存儲圓心的位置
  for(var i = 0; i < n; i++){
    for(var j = 0; j < n; j++){
      var p = {
        x: j * 4 * r + 3 * r,
        y: i * 4 * r + 3 * r,
        id: i * 3 + j
      }
      this.circles.push(p);
    }
  }
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 為了防止重復畫
  this.circles.forEach(function(v){
    drawCircle(ctx, v.x, v.y); // 畫每個圓
  })
},

drawCircle: function(ctx, x, y){ // 畫圓函數(shù)
  ctx.strokeStyle = "#FFFFFF";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
}

畫圓函數(shù)，需要注意：如何確定圓的半徑和每個圓的圓心坐標（這個我是參考的），如果以圓心為中點，每個圓上下左右各擴展一個半徑的距離，同時為了防止四邊太擠，四周在填充一個半徑的距離。那么得到的半徑就是 width / ( 4 * n + 2)，對應也可以算出每個圓所在的圓心坐標，也有一套公式，GET。

畫線需要借助 touch event 來完成，也就是，當我們 touchstart 的時候，傳入開始時的相對坐標，作為線的一端，當我們 touchmove 的時候，獲得坐標，作為線的另一端，當我們 touchend 的時候，開始畫線。

這只是一個測試畫線功能，具體的后面再進行修改。

有兩個函數(shù)，獲得當前 touch 的相對坐標：

getTouchPos: function(e){ // 獲得觸摸點的相對位置
  var rect = e.target.getBoundingClientRect();
  var p = { // 相對坐標
    x: e.touches[0].clientX - rect.left,
    y: e.touches[0].clientY - rect.top
  };
  return p;
}

畫線：

drawLine: function(p1, p2){ // 畫線
  this.ctx.beginPath();
  this.ctx.lineWidth = 3;
  this.ctx.moveTo(p1.x, p2.y);
  this.ctx.lineTo(p.x, p.y);
  this.ctx.stroke();
  this.ctx.closePath();
},

然后就是監(jiān)聽 canvas 的 touchstart、touchmove、和 touchend 事件了。

所謂的畫折線，就是，將已經觸摸到的點連起來，可以把它看作是畫折線。

首先，要用兩個數(shù)組，一個數(shù)組用于已經 touch 過的點，另一個數(shù)組用于存儲未 touch 的點，然后在 move 監(jiān)聽時候，對 touch 的相對位置進行判斷，如果觸到點，就把該點從未 touch 移到 touch 中，然后，畫折線，思路也很簡單。

drawLine: function(p){ // 畫折線
  this.ctx.beginPath();
  this.ctx.lineWidth = 3;
  this.ctx.moveTo(this.touchCircles[0].x, this.touchCircles[0].y);
  for (var i = 1 ; i < this.touchCircles.length ; i++) {
    this.ctx.lineTo(this.touchCircles[i].x, this.touchCircles[i].y);
  }
  this.ctx.lineTo(p.x, p.y);
  this.ctx.stroke();
  this.ctx.closePath();
},

judgePos: function(p){ // 判斷 觸點 是否在 circle 內
  for(var i = 0; i < this.restCircles.length; i++){
    temp = this.restCircles[i];
    if(Math.abs(p.x - temp.x) < r && Math.abs(p.y - temp.y) < r){
      this.touchCircles.push(temp);
      this.restCircles.splice(i, 1);
      this.touchFlag = true;
      break;
    }
  }
}

前面已經說了，我們把已經 touch 的點（圓）放到數(shù)組中，這個時候需要將這些已經 touch 的點給標記一下，在圓心處畫一個小實心圓：

drawPoints: function(){
  for (var i = 0 ; i < this.touchCircles.length ; i++) {
    this.ctx.fillStyle = "#FFFFFF";
    this.ctx.beginPath();
    this.ctx.arc(this.touchCircles[i].x, this.touchCircles[i].y, this.r / 2, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fill();
  }
}

同時添加一個 reset 函數(shù)，當 touchend 的時候調用，400ms 調用 reset 重置 canvas。

到現(xiàn)在為止，一個 H5 手勢解鎖的簡易版已經基本完成。

為了要實現(xiàn)記住和重置密碼的功能，把 password 保存在 localStorage 中，但首先要添加必要的 html 和樣式。

為了盡可能的使界面簡潔（越丑越好），直接在 body 后面添加了：

  
請輸入手勢密碼
  

    設置手勢密碼
    驗證手勢密碼
  

將添加到 dom 已 option 的形式傳給 handLock：

var el = document.getElementById("handlock"),
  info = el.getElementsByClassName("info")[0],
  select = document.getElementById("select"),
  message = select.getElementsByClassName("message")[0],
  radio = select.getElementsByClassName("radio")[0],
  setPass = radio.children[0].children[0],
  checkPass = radio.children[1].children[0];
new handLock({
  el: el,
  info: info,
  message: message,
  setPass: setPass,
  checkPass: checkPass,
  n: 3
}).init();

關于 info 信息顯示，自己寫了一個懸浮窗，然后默認為 display: none，然后寫了一個 showInfo 函數(shù)用來顯示提示信息，直接調用：

showInfo: function(message, timer){ // 專門用來顯示 info
  var info = this.dom.info;
  info.innerHTML = message;
  info.style.display = "block";
  setTimeout(function(){
    info.style.display = "";
  }, 1000)
}

關于 info 的樣式，在 html 中呢。

先不考慮從 localStorage 讀取到情況，新加一個 lsPass 對象，專門用于存儲密碼，由于密碼情況比較多，比如設置密碼，二次確認密碼，驗證密碼，為了方便管理，暫時設置了密碼的三種模式，分別是：

model：1 驗證密碼模式
model：2 設置密碼模式
model：3 設置密碼二次驗證

具體看下面這個圖：

這三種 model ，只要處理好它們之間如何跳轉就 ok 了，即狀態(tài)的改變。

所以就有了 initPass：

initPass: function(){ // 將密碼初始化
  this.lsPass = w.localStorage.getItem("HandLockPass") ? {
    model: 1,
    pass: w.localStorage.getItem("HandLockPass").split("-")
  } : { model: 2 };
  this.updateMessage();
},

updateMessage: function(){ // 根據(jù)當前模式，更新 dom
  if(this.lsPass.model == 2){
    this.dom.setPass.checked = true;
    this.dom.message.innerHTML = "請設置手勢密碼";
  }else if(this.lsPass.model == 1){
    this.dom.checkPass.checked = true;
    this.dom.message.innerHTML = "請驗證手勢密碼";
  }else if(this.lsPass.model = 3){
    this.dom.setPass.checked = true;
    this.dom.message.innerHTML = "請再次輸入密碼";
  }
},

有必要再來介紹一下 lsPass 的格式：

this.lsPass = {
  model：1, // 表示當前的模式
  pass: [0, 1, 2, 4, 5] // 表示當前的密碼，可能不存在
}

因為之前已經有了一個基本的實現(xiàn)框架，現(xiàn)在只需要在 touchend 之后，寫一個函數(shù)，功能就是先對當前的 model 進行判斷，實現(xiàn)對應的功能，這里要用到 touchCircles 數(shù)組，表示密碼的順序：

checkPass: function(){
  var succ, model = this.lsPass.model; //succ 以后會用到
  if(model == 2){ // 設置密碼
    if(this.touchCircles.length < 5){ // 驗證密碼長度
      succ = false;
      this.showInfo("密碼長度至少為 5！", 1000);
    }else{
      succ = true;
      this.lsPass.temp = []; // 將密碼放到臨時區(qū)存儲
      for(var i = 0; i < this.touchCircles.length; i++){
        this.lsPass.temp.push(this.touchCircles[i].id);
      }
      this.lsPass.model = 3;
      this.showInfo("請再次輸入密碼", 1000);
      this.updateMessage();
    }
  }else if(model == 3){// 確認密碼
    var flag = true;
    // 先要驗證密碼是否正確
    if(this.touchCircles.length == this.lsPass.temp.length){
      var tc = this.touchCircles, lt = this.lsPass.temp;
      for(var i = 0; i < tc.length; i++){
        if(tc[i].id != lt[i]){
          flag = false;
        }
      }
    }else{
      flag = false;
    }
    if(!flag){
      succ = false;
      this.showInfo("兩次密碼不一致，請重新輸入", 1000);
      this.lsPass.model = 2; // 由于密碼不正確，重新回到 model 2
      this.updateMessage();
    }else{
      succ = true; // 密碼正確，localStorage 存儲，并設置狀態(tài)為 model 1
      w.localStorage.setItem("HandLockPass", this.lsPass.temp.join("-")); // 存儲字符串
      this.lsPass.model = 1; 
      this.lsPass.pass = this.lsPass.temp;
      this.updateMessage();
    }
    delete this.lsPass.temp; // 很重要，一定要刪掉，bug
  }else if(model == 1){ // 驗證密碼
    var tc = this.touchCircles, lp = this.lsPass.pass, flag = true;
    if(tc.length == lp.length){
      for(var i = 0; i < tc.length; i++){
        if(tc[i].id != lp[i]){
          flag = false;
        }
      }
    }else{
      flag = false;
    }
    if(!flag){
      succ = false;
      this.showInfo("很遺憾，密碼錯誤", 1000);
    }else{
      succ = true;
      this.showInfo("恭喜你，驗證通過", 1000);
    }
  }
},

密碼的設置要參考前面那張圖，要時刻警惕狀態(tài)的改變。

思路也很簡單，就是添加點擊事件，點擊之后，改變 model 即可，點擊事件如下：

this.dom.setPass.addEventListener("click", function(e){
  self.lsPass.model = 2; // 改變 model 為設置密碼
  self.updateMessage(); // 更新 message
  self.showInfo("請設置密碼", 1000);
})
this.dom.checkPass.addEventListener("click", function(e){
  if(self.lsPass.pass){
    self.lsPass.model = 1;
    self.updateMessage();
    self.showInfo("請驗證密碼", 1000)
  }else{
    self.showInfo("請先設置密碼", 1000);
    self.updateMessage();
  }
})

ps：這里面還有幾個小的 bug，因為 model 只有 3 個，所以設置的時候，當點擊重置密碼的時候，沒有設置密碼成功，又切成驗證密碼狀態(tài)，此時無法提升沿用舊密碼，原因是 model 只有三個。

實現(xiàn)這個基本上就大功告成了，這個功能最主要的是給用戶一個提醒，若用戶劃出的密碼符合規(guī)范，顯示綠色，若不符合規(guī)范或錯誤，顯示紅色警告。

因為之前已經設置了一個 succ 變量，專門用于重繪。

drawEndCircles: function(color){ // end 時重繪已經 touch 的圓
  for(var i = 0; i < this.touchCircles.length; i++){
    this.drawCircle(this.touchCircles[i].x, this.touchCircles[i].y, color);
  }
},

// 調用
if(succ){
  this.drawEndCircles("#2CFF26"); // 綠色
}else{
  this.drawEndCircles("red"); // 紅色
}

那么，一個可以演示的版本就生成了，盡管還存在一些 bug，隨后會來解決。（詳情分支 password）

有些 bugs 在做的時候就發(fā)現(xiàn)了，一些 bug 后來用手機測試的時候才發(fā)現(xiàn)，比如，我用 chrome 的時候，沒有察覺這個 bug，當我用 android 手機 chrome 瀏覽器測試的時候，發(fā)現(xiàn)當我 touchmove 向下的時候，會觸發(fā)瀏覽器的下拉刷新，解決辦法：加了一個 preventDefault，沒想到居然成功了。

this.canvas.addEventListener("touchmove", function(e){
  e.preventDefault ? e.preventDefault() : null;
  var p = self.getTouchPos(e);
  if(self.touchFlag){
    self.update(p);
  }else{
    self.judgePos(p);
  }
}, false)

由于showInfo 中有 setTimeout 函數(shù)，可以看到函數(shù)里的演出為 1s，導致如果我們操作的速度比較快，在 1s 內連續(xù) show 了很多個 info，后面的 info 會被第一個 info 的 setTimeout 弄亂，顯示的時間小于 1s，或更短。比如，當重復點擊設置手勢密碼和驗證手勢密碼，會產生這個 bug。

解決辦法有兩個，一個是增加一個專門用于顯示的數(shù)組，每次從數(shù)組中取值然后顯示。另一種解題思路和防抖動的思路很像，就是當有一個新的 show 到來時，把之前的那個 setTimeout 清除掉。

這里采用第二種思路：

showInfo: function(message, timer){ // 專門用來顯示 info
  clearTimeout(this.showInfo.timer);
  var info = this.dom.info;
  info.innerHTML = message;
  info.style.display = "block";
  this.showInfo.timer = setTimeout(function(){
    info.style.display = "";
  }, timer || 1000)
},

所謂的小尾巴，如下：

解決辦法也很簡單，在 touchend 的時候，先進行 clearRect 就 ok 了。

性能優(yōu)化一直都是一個大問題，不要以為前端不需要考慮內存，就可以隨便寫代碼。

之前在設計自己網頁的時候，用到了滾動，鼠標滑輪輕輕一碰，滾動函數(shù)就執(zhí)行了幾十多則幾百次，之前也考慮過解決辦法。

對于 touchmove 函數(shù)，原理都是一樣的，手指一劃，就執(zhí)行了 n 多次，這個問題后面在解決，先來看另一個問題。

touchmove 是一個高頻函數(shù)，看到這里，如果你并沒有仔細看我的代碼，那你對我采用的 canvas 畫圖方式可能不太了解，下面這個是 touchmove 函數(shù)干了哪些事：

先判斷，如果當前處于未選中一個密碼狀態(tài)，則繼續(xù)監(jiān)視當前的位置，直到選中第一個密碼，進入第二步；

進入 update 函數(shù)，update 函數(shù)主要干四件事，重繪圓（密碼）、判斷當前位置、重繪點、重繪線；

第二步是一個很揪心的動作，為什么每次都要重繪圓，點和線呢？

上面這個圖可以很好的說明問題，因為在設置或驗證密碼的過程中，我們需要用一條線來連接觸點到當前的最后一個密碼，并且當 touchmove 的時候，能看到它們在變化。這個功能很棒，可以勾勒出 touchmove 的軌跡。

但是，這就必須要時刻刷新 canvas，性能大大地降低，刷新的那可是整個 canvas。

因為 canvas 只有一個，既要畫背景圓（密碼），又要畫已選密碼的點，和折線。這其中好多步驟，自始至終只需要一次就好了，比如背景圓，只需在啟動的時候畫一次，已選密碼，只要當 touchCircles 新加元素的時候才會用一次，還不用重繪，只要畫就可以了。折線分成兩部分，一部分是已選密碼之間的連線，還有就是最后一個密碼點到當前觸點之間的連線。

如果有兩個 canvas 就好了，一個存儲靜態(tài)的，一個專門用于重繪。

為什么不可以有呢！

我的解決思路是，現(xiàn)在有兩個 canvas，一個在底層，作為描繪靜態(tài)的圓、點和折線，另一個在上層，一方面監(jiān)聽 touchmove 事件，另一方面不停地重繪最后一個密碼點的圓心到當前觸點之間的線。如果這樣可以的話，touchmove 函數(shù)執(zhí)行一次的效率大大提高。

插入第二個 canvas：

var canvas2 = canvas.cloneNode(canvas, true);
canvas2.style.position = "absolute";//讓上層 canvas 覆蓋底層 canvas
canvas2.style.top = "0";
canvas2.style.left = "0";
this.el.appendChild(canvas2);
this.ctx2 = canvas2.getContext("2d");

要改換對第二個 ctx2 進行 touch 監(jiān)聽，并設置一個 this.reDraw 參數(shù)，表示有新的密碼添加進來，需要對點和折線添加新內容， update 函數(shù)要改成這樣：

update: function(p){ // 更新 touchmove
  this.judgePos(p); // 每次都要判斷
  this.drawLine2TouchPos(p); // 新加函數(shù)，用于繪最后一個密碼點點圓心到觸點之間的線
  if(this.reDraw){ // 有新的密碼加進來
    this.reDraw = false;
    this.drawPoints(); // 添加新點
    this.drawLine();// 添加新線
  }
},

drawLine2TouchPos: function(p){
  var len = this.touchCircles.length;
  if(len >= 1){
    this.ctx2.clearRect(0, 0, this.width, this.width); // 先清空
    this.ctx2.beginPath();
    this.ctx2.lineWidth = 3;
    this.ctx2.moveTo(this.touchCircles[len - 1].x, this.touchCircles[len - 1].y);
    this.ctx2.lineTo(p.x, p.y);
    this.ctx2.stroke();
    this.ctx2.closePath();
  }
},

相應的 drawPoints 和 drawLine 函數(shù)也要對應修改，由原理畫所有的，到現(xiàn)在只需要畫新加的。

效果怎么樣：

move 函數(shù)執(zhí)行多次，而其他函數(shù)只有當新密碼加進來的時候才執(zhí)行一次。

之前也已經說過了，這個 touchmove 函數(shù)執(zhí)行的次數(shù)比較多，盡管我們已經用兩個 canvas 對重繪做了很大的優(yōu)化，但 touchmove 還是有點大開銷。

這個時候我想到了防抖動和節(jié)流，首先防抖動肯定是不行的，萬一我一直處于 touch 狀態(tài)，重繪會延遲死的，這個時候節(jié)流會好一些。防抖和節(jié)流。

先寫一個節(jié)流函數(shù)：

throttle: function(func, delay, mustRun){
  var timer, startTime = new Date(), self = this;
  return function(){
    var curTime = new Date(), args = arguments;
    clearTimeout(timer);
    if(curTime - startTime >= mustRun){
      startTime = curTime;
      func.apply(self, args);
    }else{
      timer = setTimeout(function(){
        func.apply(self, args);
      }, delay)
    }
  }
}

節(jié)流函數(shù)的意思：在延遲為 delay 的時間內，如果函數(shù)再次觸發(fā)，則重新計時，這個功能和防抖動是一樣的，第三個參數(shù) mustRun 是一個時間間隔，表示在時間間隔大于 mustRun 后的一個函數(shù)可以立即直接執(zhí)行。

然后對 touchmove 的回調函數(shù)進行改造：

var t = this.throttle(function(e){
  e.preventDefault ? e.preventDefault() : null;
  e.stopPropagation ? e.stopPropagation() : null;
  var p = this.getTouchPos(e);
  if(this.touchFlag){
    this.update(p);
  }else{
    this.judgePos(p);
  }
}, 16, 16)
this.canvas2.addEventListener("touchmove", t, false)

關于 delay 和 mustRun 的時間間隔問題，web 性能里有一個 16ms 的概念，就是說如果要達到每秒 60 幀，間隔為 1000/60 大約為 16 ms。如果間隔大于 16ms 則 fps 會比 60 低。

鑒于此，我們這里將 delay 和 mustRun 都設為 16，在極端的情況下，也就是最壞的情況下，或許需要 15 + 15 = 30ms 才會執(zhí)行一次，這個時候要設置兩個 8 才合理，不過考慮到手指活動是一個連續(xù)的過程，怎么可能會每 15 秒執(zhí)行一次，經過在線測試，發(fā)現(xiàn)設置成 16 效果還不錯。

性能真的能優(yōu)化嗎，我們來看兩個圖片，do 和 wantdo 表示真實執(zhí)行和放到節(jié)流函數(shù)中排隊準備執(zhí)行。

當 touchmove 速度一般或很快的時候：

當 touchmove 速度很慢的時候：

可以看出來，滑動過程中，速度一般和快速，平均優(yōu)化了一半，慢速效果也優(yōu)化了 20 到 30% 之間，平時手勢鎖解鎖時候，肯定速度很快。可見，節(jié)流的優(yōu)化還是很明顯的。

關鍵是，優(yōu)化之后的流程性，沒有受到任何影響。

這個節(jié)流函數(shù)最終還是出現(xiàn)了一個 bug：由于是延遲執(zhí)行的，導致 e.preventDefault 失效，在手機瀏覽器向下滑會出現(xiàn)刷新的情況，這也算事件延遲的一個危害吧。

解決辦法：在節(jié)流函數(shù)提前取消默認事件：

throttle: function(func, delay, mustRun){
  var timer, startTime = new Date(), self = this;
  return function(e){
    if(e){
      e.preventDefault ? e.preventDefault() : null; //提前取消默認事件，不要等到 setTimeout
      e.stopPropagation ? e.stopPropagation() : null;
    }
    ...
  }
}

大概花了三天左右的時間，將這個 H5 的手勢解鎖給完成，自己還是比較滿意的，雖然可能達不到評委老師的認可，不過自己在做的過程中，學習到了很多新知識。

H5lock
Canvas教程
js獲取單選框里面的值
前端高性能滾動 scroll 及頁面渲染優(yōu)化

歡迎來我的博客交流。