手機屏幕解鎖

實現原理
　　利用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. }

須要瞭解IT課程的同窗，點擊連接，QQ登陸便可www.kgc.cn/index.php?t…，就能夠獲取免費學習視頻，若是是用手機或者郵箱註冊，記得輸入邀請碼7130，才能夠獲取新人獎勵哦~~