Phone screen unlock

Implementation principle
Use HTML5 's canvas to draw out the unlocked circles and use the touch event to unlock the circles and see the code directly.

2. function createcircle () {//creates the coordinates of the unlocking point, distributes the radius evenly according to the size of the canvas
6. var n = choosetype;//to draw a n*n matrix
8. Lastpoint = [];
10. arr = [];
12. Restpoint = [];
14. R = ctx.canvas.width/(2 + 4 * n);//The formula calculates the radius and the size of the canvas
16. for (var i = 0; i < n; i++) {
18. for (var j = 0; J < N; j + +) {
20. Arr.push ({
22. X:J * 3 * R,
24. Y:I * 3 * r
26. });
28. Restpoint.push ({
30. X:J * 3 * R,
32. Y:I * 3 * r
34. });
36. }
38. }
40. return arr;
42. }

Copy Code

Event binding can be done after the circle in the canvas is drawn.

2. function Bindevent () {
4. Can.addeventlistener ("Touchstart", function (e) {
6. var po = getPosition (e);
8. Console.log (PO);
10. for (var i = 0; i < arr.length; i++) {
12. if (Math.Abs (po.x-arr[i].x) < R && Math.Abs (PO.Y-ARR[I].Y) < R) {//To determine if the starting point is inside the loop
16. touchflag= true;
18. Drawpoint (ARR[I].X,ARR[I].Y);
20. Lastpoint.push (Arr[i]);
22. Restpoint.splice (i,1);
24. Break
26. }
28. }
30. }, False);
32. Can.addeventlistener ("Touchmove", function (e) {
34. if (Touchflag) {
36. Update (GetPosition (e));
38. }
40. }, False);
42. Can.addeventlistener ("Touchend", function (e) {
44. if (Touchflag) {
46. Touchflag = false;
48. Storepass (Lastpoint);
50. SetTimeout (function () {
54. Init ();
56. }, 300);
58. }
64. }, False);
66. }

Copy Code

Then to the most critical steps to draw the unlock path logic, through the constant triggering of the Touchmove event, call the canvas MoveTo method and LineTo method to draw a discount, while judging whether to reach the circle we draw, where lastpoint save the correct circle path, Restpoint Save all circles to remove the correct path after the remaining. Update method:

2. Function Update (PO) {//Core transform method called at touchmove time
4. Ctx.clearrect (0, 0, ctx.canvas.width, ctx.canvas.height);
8. for (var i = 0; i < arr.length; i++) {//each frame draw the panel first
10. Drawcle (arr[i].x, ARR[I].Y);
12. }
16. Drawpoint (lastpoint);//flower trajectory per frame
18. DrawLine (PO, lastpoint);//Draw center of each frame
22. for (var i = 0; i < restpoint.length; i++) {
24. if (Math.Abs (po.x-restpoint[i].x) < r&& math.abs (PO.Y-RESTPOINT[I].Y) < R) {
26. Drawpoint (RESTPOINT[I].X,RESTPOINT[I].Y);
28. Lastpoint.push (Restpoint[i]);
30. Restpoint.splice (i, 1);
32. Break
34. }
36. }
40. }

Copy Code

Finally, the closing work, the lastpoint stored in the path of the array into the password exists localstorage inside, then used to understand the lock verification logic.

2. function Storepass (PSW) {//Touchend after the end of the processing of the password and status
4. if (Pswobj.step = = 1) {
6. if (Checkpass (Pswobj.fpassword, PSW)) {
8. Pswobj.step = 2;
10. Pswobj.spassword = PSW;
12. document.getElementById (' title '). InnerHTML = ' password saved successfully ';
14. Drawstatuspoint (' #2CFF26 ');
16. Window.localStorage.setItem (' Passwordx ', Json.stringify (Pswobj.spassword));
18. Window.localStorage.setItem (' Choosetype ', choosetype);
20. } else {
22. document.getElementById (' title '). InnerHTML = ' two times inconsistent, re-enter ';
24. Drawstatuspoint (' Red ');
26. Delete Pswobj.step;
28. }
30. } else if (Pswobj.step = = 2) {
32. if (Checkpass (Pswobj.spassword, PSW)) {
34. document.getElementById (' title '). InnerHTML = ' unlocked successfully ';
36. Drawstatuspoint (' #2CFF26 ');
38. } else {
40. Drawstatuspoint (' Red ');
42. document.getElementById (' title '). InnerHTML = ' unlock failed ';
44. }
46. } else {
48. Pswobj.step = 1;
50. Pswobj.fpassword = PSW;
52. document.getElementById (' title '). InnerHTML = ' re-enter ';
54. }
58. }

Phone screen unlock