HTML5 implements gesture screen unlocking_html/css_WEB-ITnose

For details, please click

Effect display

　Implementation principle

Use the HTML5 canvas to draw out the unlocked circles, use touch events to unlock these circles, and look at the code directly.

1. function createCircle() {// Create the coordinates of the unlock point and evenly distribute the radius according to the size of the canvas
3. var n = chooseType;// draw n*n matrix
4. lastPoint = [];
5. arr = [];
6. restPoint = [] ;
7. r = ctx.canvas.width / (2 4 * n);//The formula to calculate the radius is related to the size of the canvas
8. for (var i = 0; i < n; i ) {
9.                                                                                                 r.                    x: j * 4 * r 3 * r,
10.                     y: i * 4 * r 3 * r
                             }
//return arr;
}
Copy code
17. After the circle in the canvas is drawn, you can proceed Event binding

18. 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
    8.                                                                                                                  lastPoint.push(arr[i]);
    9.                                                                                      }
    10.            }, false);
    11. can.addEventListener("touchmove", function (e) {
    12. if (touchFlag) {
    13. update(getPosition(e));
    14. }
    15. }, false);
    16. can.addEventListener("touchend", function (e) {
    17. if (touchFlag) {
    18. touchFlag = false;
    19.                       storePass(lastPoint);
    20.                 }, 300);
    21. }
    24. }, false);
    25. }
    27. Copy Code
    Then comes the most critical step of drawing the unlocking path logic. Through the continuous triggering of touchmove events, the moveTo method and lineTo method of canvas are called to draw the discount and judge at the same time. Whether it reaches the circle we drew, lastPoint saves the correct circle path, and restPoint saves the rest of all circles after removing the correct path. Update method:
    33. function update(po) {// The core transformation method is called when touchmove
    ctx.clearRect(0 , 0, ctx.canvas.width, ctx.canvas.height);
    for (var i = 0 ; i < arr.length ; i ) { // Each frame starts with Draw the panel

    
    drawCle(arr[i].x, arr[i].y);
    
    }
    

    drawPoint(lastPoint) ;//Flower trajectory in each frame

    1. drawLine(po, lastPoint);// Draw circle center in each frame
    3. for (var i = 0; i < restPoint. length ; i ) {
    4. if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r ) {
    5.                                                                                                                  (i, 1);
    6.                                                                   
    7. Copy code

    8. 
       
       The last step is the finishing work, turning the array saved by lastPoint in the path into a password and storing it in localstorage, which will then be used to process the unlocking verification logic.
       
       

       1. function storePass(psw) {// Processing of password and status after touchend ends
       2. if (pswObj.step = = 1) {
       3.                                                                                                               .spassword = psw;
       4.             document.getElementById('title').innerHTML = 'Password saved successfully';                                                              setItem('passwordx', JSON .stringify (pswObj.spassword)); elementById('title' ).innerHTML = 'Inconsistent twice, re-enter'; 🎜> } else if (pswObj.step == 2) {
       5.             if (checkPass(pswObj.spassword, psw)) {
       6.                 document.getElementById('title').innerHTML = '解锁成功';
       7. drawStatusPoint('#2CFF26');
       8. } else {
       9. drawStatusPoint('red'); document.getElementById('title ').innerHTML = 'Unlock failed'; bj.fpassword = psw;
       10.                            document.getElementById('title').innerHTML = 'Enter again'; >
       Copy code
       13. 　
       Unlock component
       15. Write this HTML5 unlock as a component and place it at https:// github.com/lvming6816077/H5lock
       16. Reprinted from AlloyTeam: http://www.alloyteam.com/2015/07 ... u-shou-shi-jie-suo/
       For more html5 content, please click