Gesture unlocking of mobile phone by canvas

Time:2020-12-9

According to the international practice, the effect picture should be displayed first

1. JS dynamically initializes DOM structure

First, in the index.html Add basic styles to

body{background:pink;text-align: center;}

Add a mobile meta head

introduce index.js script

index.js

//Anonymous function self execution
(function(){
    //Canvas lock is a global object
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
    }
    //Dynamic generation of DOM
    canvasLock.prototype.initDom=function(){
        //Create a div
        var div=document.createElement("div");
        Var H4 = draw unlock pattern;
        div.innerHTML=h4;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //Create canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //The essence of csstext is to set the style attribute value of HTML element
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

        div.appendChild(canvas);
        document.body.appendChild(div);

        //Set canvas default width and height
        var width=this.width||300;
        var height=this.height||300;

        canvas.style.width=width+"px";
        canvas.style.height=height+"px";

        canvas.width=width;
        canvas.height=height;

    }

    
    //Init stands for initialization, the entry of the program
    canvasLock.prototype.init=function(){
        //Dynamic generation of DOM
        this.initDom();

        //Create canvas
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

    }
})();

stay index.html Create an instance in and initialize

new canvasLock({}).init();

design sketch

 

 

2. Circle drawing function

We need to add the relationship between the width of the canvas and the radius of the circle

If there are three circles in a row, there are four spaces. The width of the spacing is the same as the diameter of the circle, which is equivalent to 7 diameters, that is, 14 radii

If there are four circles in a row, there are five spaces. The width of the spacing is the same as the diameter of the circle, which is equivalent to 9 diameters, that is, 18 radii

If there are n circles in a row, there are n + 1 spacing. The width of the spacing is the same as the diameter of the circle, which is equivalent to 2n + 1 diameter, that is, 4N + 2 radii

 

 

Two methods are added

//Draw a single circle with the given coordinate point as the center of the circle
    canvasLock.prototype.drawCircle=function(x,y){
        this.ctx.strokeStyle="#abcdef";
        this.ctx.lineWidth=2;
        this.ctx.beginPath();
        this.ctx.arc(x,y,this.r,0,2*Math.PI,true);
        this.ctx.closePath();
        this.ctx.stroke();
    }
    
    //Draw all the circles
    canvasLock.prototype.createCircle=function(){
        var n= this.circleNum ; // several circles in a row
        var count=0;
        this.r= this.canvas.width/ (4 * n + 2); // the formula calculates the radius of each circle
        this.lastPoint= []; // stores the information of the circle that has been clicked
        this.arr= []; // stores information about all circles
        this.restPoint= []; // stores the information of the circle that has not been hit
        var r=this.r;

        for(var i=0;i

Remember to call when initializing

canvasLock.prototype.init=function(){
        //Dynamic generation of DOM
        this.initDom();

        //Create canvas
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

        //Draw all the circles
        this.createCircle();
    }

Don’t forget to be in index.html Pass in parameters when instantiating in (define several circles in a row)

new canvasLock({circleNum:3}).init();

design sketch

 

 

3. Canvas event operation — realize circle drawing and line drawing

The getposition method is used to get the distance (left and top) of the mouse touch point from the canvas

canvasLock.prototype.getPosition=function(e){
        var rect=e. currentTarget.getBoundingClientRect (); // get the distance between the canvas and the screen
        var po={
            //Left distance between mouse and canvas - canvas distance to left of view = left distance from mouse to canvas
            x:(e.touches[0].clientX-rect.left),
            //Up distance between mouse and view - canvas distance up from view = up distance from mouse to canvas
            y:(e.touches[0].clientY-rect.top)
        };
        return po;
    }

Add the touchstart event to canvas to judge whether the touch point is in the circle

If the touch point is inside the circle, it is allowed to drag and drop, and the circle is added to the lastpoint and removed from the restpoint

this.canvas.addEventListener("touchstart",function(e){
            var po= self.getPosition (e) ; // the distance between the mouse and the canvas

            //Judge whether it is in the circle
            for(var i=0;i

 

Principle of judging whether it is in a circle:

 

The absolute value of the distance between the x-axis offset of the center of the circle and the x-axis offset of the mouse point is less than the radius

also

The absolute value of the distance between the y-axis offset of the center of the circle and the y-axis offset of the mouse point is less than the radius

You can judge that the mouse is in the circle

 

Bind the touchmove event. When the touch point moves, draw a solid circle on the circle and draw a line

//Animation of touch point moving
    canvasLock.prototype.update=function(po){
        //Clear screen, canvas animation must clear the original content
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //Draw all circles with the given coordinate point as the center of the circle
        for(var i=0;i

design sketch

 

 

4. Implementation of gesture link operation in canvas

Add the operation when touching the next target circle in touchmove

//When you hit the next circle, you just need to push to the lastpoint
        for(var i=0;i

design sketch

 

 

5. Judgment of unlocking success

 

//Set password
    canvasLock.prototype.storePass=function(){
        if(this.checkPass()){
            document.getElementById ("title"). InnerHTML "(" unlock succeeded) ";
            this.drawStatusPoint("lightgreen");
        }else{
            document.getElementById ("title"). InnerHTML "(" unlock failed) ";
            this.drawStatusPoint("orange");
        }
    }

    //Determine the password entered
    canvasLock.prototype.checkPass=function(){
        Var P1 = "123", // successful password
            p2="";
        for(var i=0;i

 

be accomplished!! All the codes are shown below

index.html

Gesture unlocking
    
    
    <span style="background-color: #f5f5f5; color: #800000;">
           body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
    



    
    
        <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">  circleNum:3  Represents a row of three circles</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> canvasLock({circleNum:</span><span style="background-color: #f5f5f5; color: #000000;">3</span><span style="background-color: #f5f5f5; color: #000000;">}).init();
    </span>

index.js

//Anonymous function self execution
(function(){
    //Canvas lock is a global object
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
        this.circleNum=obj.circleNum;
    }
    //Dynamic generation of DOM
    canvasLock.prototype.initDom=function(){
        //Create a div
        var div=document.createElement("div");
        Var H4 = draw unlock pattern;
        div.innerHTML=h4;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //Create canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //The essence of csstext is to set the style attribute value of HTML element
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

        div.appendChild(canvas);
        document.body.appendChild(div);

        //Set canvas default width and height
        var width=this.width||300;
        var height=this.height||300;

        canvas.style.width=width+"px";
        canvas.style.height=height+"px";

        canvas.width=width;
        canvas.height=height;

    }

    //Draw a single circle with the given coordinate point as the center of the circle
    canvasLock.prototype.drawCircle=function(x,y){
        this.ctx.strokeStyle="#abcdef";
        this.ctx.lineWidth=2;
        this.ctx.beginPath();
        this.ctx.arc(x,y,this.r,0,2*Math.PI,true);
        this.ctx.closePath();
        this.ctx.stroke();
    }
    
    //Draw all the circles
    canvasLock.prototype.createCircle=function(){
        var n= this.circleNum ; // several circles in a row
        var count=0;
        this.r= this.canvas.width/ (4 * n + 2); // the formula calculates the radius of each circle
        this.lastPoint= []; // stores the information of the circle that has been clicked
        this.arr= []; // stores information about all circles
        this.restPoint= []; // stores the information of the circle that has not been hit
        var r=this.r;

        for(var i=0;i