手机屏幕解锁代码分享~~

实现原理 　　利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。 1. function createCircle() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径 2. 3. var n = chooseType;// 画出n*n的矩阵 4. lastPoint = []; 5. arr = []; 6. restPoint = []; 7. r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关 8. for (var i = 0 ; i < n ; i++) { 9. for (var j = 0 ; j < n ; j++) { 10. arr.push({ 11. x: j * 4 * r + 3 * r, 12. y: i * 4 * r + 3 * r 13. }); 14. restPoint.push({ 15. x: j * 4 * r + 3 * r, 16. y: i * 4 * r + 3 * r 17. }); 18. } 19. } 20. //return arr; 21. } 复制代码 　　canvas里的圆圈画好之后可以进行事件绑定 1. function bindEvent() { 2. can.addEventListener("touchstart", function (e) { 3. var po = getPosition(e); 4. console.log(po); 5. for (var i = 0 ; i < arr.length ; i++) { 6. if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起始点是否在圈圈内部 7. 8. touchFlag = true; 9. drawPoint(arr[i].x,arr[i].y); 10. lastPoint.push(arr[i]); 11. restPoint.splice(i,1); 12. break; 13. } 14. } 15. }, false); 16. can.addEventListener("touchmove", function (e) { 17. if (touchFlag) { 18. update(getPosition(e)); 19. } 20. }, false); 21. can.addEventListener("touchend", function (e) { 22. if (touchFlag) { 23. touchFlag = false; 24. storePass(lastPoint); 25. setTimeout(function(){ 26. 27. init(); 28. }, 300); 29. } 30. 31. 32. }, false); 33. } 复制代码 　　接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineTo方法来画出折现，同时判断是否达到我们所画的圈圈里面，其中lastPoint保存正确的圈圈路径，restPoint保存全部圈圈去除正确路径之后剩余的。 Update方法： 1. function update(po) {// 核心变换方法在touchmove时候调用 2. ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 3. 4. for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来 5. drawCle(arr[i].x, arr[i].y); 6. } 7. 8. drawPoint(lastPoint);// 每帧花轨迹 9. drawLine(po , lastPoint);// 每帧画圆心 10. 11. for (var i = 0 ; i < restPoint.length ; i++) { 12. if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) { 13. drawPoint(restPoint[i].x, restPoint[i].y); 14. lastPoint.push(restPoint[i]); 15. restPoint.splice(i, 1); 16. break; 17. } 18. } 19. 20. } 复制代码 　　最后就是收尾工作，把路径里面的lastPoint保存的数组变成密码存在localstorage里面，之后就用来处理解锁验证逻辑了。 1. function storePass(psw) {// touchend结束之后对密码和状态的处理 2. if (pswObj.step == 1) { 3. if (checkPass(pswObj.fpassword, psw)) { 4. pswObj.step = 2; 5. pswObj.spassword = psw; 6. document.getElementById('title').innerHTML = '密码保存成功'; 7. drawStatusPoint('#2CFF26'); 8. window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword)); 9. window.localStorage.setItem('chooseType', chooseType); 10. } else { 11. document.getElementById('title').innerHTML = '两次不一致，重新输入'; 12. drawStatusPoint('red'); 13. delete pswObj.step; 14. } 15. } else if (pswObj.step == 2) { 16. if (checkPass(pswObj.spassword, psw)) { 17. document.getElementById('title').innerHTML = '解锁成功'; 18. drawStatusPoint('#2CFF26'); 19. } else { 20. drawStatusPoint('red'); 21. document.getElementById('title').innerHTML = '解锁失败'; 22. } 23. } else { 24. pswObj.step = 1; 25. pswObj.fpassword = psw; 26. document.getElementById('title').innerHTML = '再次输入'; 27. } 28. 29. }