HTML5 gesture screen unlocking-

Use HTML5 canvas to draw out unlocked circles, use touch events to unlock these circles, and directly view the code .,. Effect display

　　 Implementation Principle
Use HTML5 canvas to draw unlocked circles and use touch events to unlock these circles and view the Code directly.

1. Function createCircle () {// create the coordinates of the unlock point, and evenly allocate the radius based on the size of the canvas.
   
2. 
   
3. Var n = chooseType; // draws the n * n matrix.
   
4. LastPoint = [];
   
5. Arr = [];
   
6. RestPoint = [];
   
7. R = ctx. canvas. width/(2 + 4 * n); // The formula calculates the radius and the size of the 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. }

Events can be bound after the circles in the canvas are drawn.

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) {// used to determine whether the starting point is inside the circle
   
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. }

Next we went to the most critical step to draw the logic of the unlock path. Through the constant triggering of the touchmove event, we called the moveTo method and lineTo method of canvas to draw the discount, and determined whether the discount reached the circle we drew, the lastPoint stores the correct circle path, and the restPoint stores all circles to remove the remaining paths. Update method:

1. Function update (po) {// The core transformation method called during touchmove
   
2. Ctx. clearRect (0, 0, ctx. canvas. width, ctx. canvas. height );
   
3. 
   
4. For (var I = 0; I <arr. length; I ++) {// draw the Panel first at each frame.
   
5. DrawCle (arr [I]. x, arr [I]. y );
   
6. }
   
7. 
   
8. DrawPoint (lastPoint); // the path of each frame
   
9. DrawLine (po, lastPoint); // draw the center of each frame
   
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. }

The final step is to close the work, and change the array stored by the lastPoint in the path into a password in localstorage, which is then used to process the unlock verification logic.

1. Function storePass (psw) {// process the password and status after 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 = 'password saved successfully ';
   
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 = 'inconsistent twice, re-input ';
    
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 = 'unlocked successfully ';
    
18. DrawStatusPoint ('#2cff26 ');
    
19. } Else {
    
20. DrawStatusPoint ('red ');
    
21. Document. getElementById ('title'). innerHTML = 'unlock failed ';
    
22. }
    
23. } Else {
    
24. PswObj. step = 1;
    
25. PswObj. fpassword = psw;
    
26. Document. getElementById ('title'). innerHTML = 'input again ';
    
27. }
    
28. 
    
29. }

　　 Unlock Components
The HTML5 unlock is written as a component, placed in the https://github.com/lvming6816077/H5lock

Reproduced from AlloyTeam: http://www.alloyteam.com/2015/07... u-shou-shi-jie-suo/