In the previous article, we drew the initial interface of gesture unlocking based on canvas principle. We also know that the difficulty of gesture unlocking is not the drawing of the initial interface, but a series of changes in the interface during gesture movement, including the color changes of touched points and the added line paths, which are realized through JS interaction. In this application, the main problem is related to the JS interaction. And touch events in JS HTML5 events.

Looking back, (1) the JS event mechanism and touch events in it:
Touch start: Triggered at the start of the touch
Touch end: Triggered at the end of the touch
Touch move: Triggered during the trigger move. Note: Scroll events are triggered by default when touching a mobile device, so perventDefalut() is used to cancel its default behavior.
Each trigger event corresponds to the event object. For touchstart and touchmove events, there is a touches array in the event object, which includes attributes such as clientX,clientY, target and so on.

When all touch events are known, we should think about how each event handler should be written, that is, how to operate at the beginning of pressing a certain point, how to respond at the end of touch, and what to do during touch movement. Let's solve it one by one.

1. touchstart event
   When you first touch a mobile device, you should fill in the touched points.
   How to determine which point to touch? (Using the distance between the touch point and the center of nine points, which point is considered less than the radius r)

for(var num = 0; num< pointArr.length; num++)
{
    var CurrX = e.touches[0].clientX - pointArr[num].x;
    var CurrY = e.touches[0].clientY - pointArr[num].y;
    var dis = Math.pow((Math.pow(CurrX, 2) + Math.pow( CurrY, 2)), 0.5);
    if(dis <= r)
    {
        //console.log(pointArr[num].id);
        //Colour this point
        DrawColor(pointArr[num].x, pointArr[num].y);
        //LineArr.push(pointArr[num]);
        break;
    }
}

When the second touch is started, the previous drawing path should be cleared. The touch point is then color filled to indicate that the point has been selected.

if(Count >= 2)
{
    ctx.clearRect(0, 0, 1200, 1200);
    //Set the colors to white, then fill and edge them.
    DrawCirclePanel(pointArr);
    for(var i = 0; i < pointArr.length; i++)
    {
        pointArr[i].visited = false;
    }
}

2.touchmove event
Since H5 triggers rolling events by default when touchmove events are triggered, the default behavior of events must be cancelled first.

var handlerMove = function(e){
    e.preventDefault();

In addition, in the process of touching and moving, we need to fill in the selected points and draw a path according to the selected points. We can consider using lineTo(x,y) to draw the path. It is not difficult to imagine that in order to draw a line, it is necessary to know the coordinates of the center of a point in order to draw a line from a point to a point. Therefore, it is necessary to introduce an array LineArr to save the selected points.

CurrX = e.touches[0].clientX - pointArr[num].x;
CurrY = e.touches[0].clientY - pointArr[num].y;
dis = Math.pow((Math.pow(CurrX, 2) + Math.pow( CurrY, 2)), 0.5);
/*console.log(dis);*/
if(dis <= r)
{
    pointArr[num].visited = true;                           
    //Colour this point
    DrawColor(pointArr[num].x, pointArr[num].y);
    //Still have to draw a line.;You need to know the coordinates of the points before and after; you can consider doing this:
    //That is to say, all the points marked arepushEnter an array, and then just draw a line along the coordinates of these points in the array.                          
    LineArr.push(pointArr[num]);
}
//Next, connect the dots in LineArr
if(LineArr.length > 1)
{
    var len = LineArr.length;

    ctx.strokeStyle = "rgba(255,255,10, 0.8)";
    DrawLine(LineArr[len - 2], LineArr[len - 1]);
}

In this way, the basic processing in the touch process is over.
3. touchend event
What should we do after touching?
One is the process of setting a gesture password.
In this case, the main task of the event handler is to store the drawn password in the Local Storage.
Note: LocalStoarge can only store strings, because object objects are converted to strings when stored (call JSON.stringify)

var localS = window.localStorage;
localS.setItem('result', JSON.stringify(LineArr));     //localStorage can only save strings

setLock = false;  //setLock, the global variable, is set to false, indicating that the next unlocking process will occur.

The other is the unlocking process:
In this case, the event handler mainly does these things:
The password in the cache will be obtained first.
Compare the obtained password with the one drawn in this drawing.

var getStorage = localS.getItem("result");       //localStorage can only save strings, so it can only be taken out in string format, so it can be converted to JSON format.
var res = JSON.parse(getStorage);
if(res.length != LineArr.length)
{

    alert('The length of the password entered twice is not the same,Please unlock again!');
    setLock = false;
}
else
{
    for(var i = 0; i < LineArr.length; i++)
    {
        if(res[i].id != LineArr[i].id)
        {
            alert("Two inconsistent passwords,Please unlock again!");
            break;
            setLock = false;
        }
    }
    if(i == LineArr.length)
    {
        alert("Successful unlocking!");
        setLock = true;
    }
}

Let's talk about H5 cached Local Storage and Session Storage.
Both are stored on the client side, but there are also differences.
Local Storage must be removed manually before it disappears. Otherwise, once saved, it will not disappear.
The session Storage belongs to the session level, and when the browser window closes, the information saved is gone.

At this point, the gesture unlocking process is over. Of course, there are still two problems, which will be improved in the future. As for the source code, you can access my Github address: https://github.com/DangDangHellen/GestureLock