Phone screen unlock

Source: Internet
Author: User

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.

  1. function createcircle () {//creates the coordinates of the unlocking point, distributes the radius evenly according to the size of the canvas
  2. var n = choosetype;//to draw a n*n matrix
  3. Lastpoint = [];
  4. arr = [];
  5. Restpoint = [];
  6. R = ctx.canvas.width/(2 + 4 * n);//The formula calculates the radius and the size of the canvas
  7. for (var i = 0; i < n; i++) {
  8. for (var j = 0; J < N; j + +) {
  9. Arr.push ({
  10. X:J * 3 * R,
  11. Y:I * 3 * r
  12. });
  13. Restpoint.push ({
  14. X:J * 3 * R,
  15. Y:I * 3 * r
  16. });
  17. }
  18. }
  19. return arr;
  20. }

Copy Code


Event binding can be done after the circle in the canvas is 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) {//To determine if the starting point is inside the loop
  7. touchflag= true;
  8. Drawpoint (ARR[I].X,ARR[I].Y);
  9. Lastpoint.push (Arr[i]);
  10. Restpoint.splice (i,1);
  11. Break
  12. }
  13. }
  14. }, False);
  15. Can.addeventlistener ("Touchmove", function (e) {
  16. if (Touchflag) {
  17. Update (GetPosition (e));
  18. }
  19. }, False);
  20. Can.addeventlistener ("Touchend", function (e) {
  21. if (Touchflag) {
  22. Touchflag = false;
  23. Storepass (Lastpoint);
  24. SetTimeout (function () {
  25. Init ();
  26. }, 300);
  27. }
  28. }, False);
  29. }

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:

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

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.

    1. function Storepass (PSW) {//Touchend after the end of the processing of the password and status
    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 = ' two times inconsistent, re-enter ';
    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 = ' re-enter ';
    27. }
    28. }

Phone screen unlock

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.