全国服务热线：4008-888-888

当前位置：建站首页 > 新闻资讯 > 技术知识 >

技术知识

canvas完成手机上的手式解锁的流程详尽

所属分类：技术知识发布时间：2021-02-22

本文详细介绍了canvas手机上的手式解锁，共享给大伙儿，顺带给自身留个笔记，空话很少说，实际以下：

依照国际性国际惯例，先放实际效果图

1、js动态性原始化Dom构造

最先在index.html中加上基础款式

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

加个挪动端meta头

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

引进index.js脚本制作

<script src="index.js"></script>

index.js

// 密名涵数自实行
(function(){
    // canvasLock是全局性目标
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
    }
    //动态性转化成DOM
    canvasLock.prototype.initDom=function(){
        //建立1个div
        var div=document.createElement("div");
        var h4="<h4 id='title' class='title'>绘图解锁图案设计</h4>";
        div.innerHTML=h4;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //建立canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //cssText 的实质便是设定 HTML 元素的 style 特性值
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

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

        //设定canvas默认设置宽高
        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意味着原始化，程序流程的通道
    canvasLock.prototype.init=function(){
        //动态性转化成DOM
        this.initDom();

        //建立画布
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

    }
})();

在index.html中建立案例并原始化

new canvasLock({}).init();

实际效果图

2、 画圆涵数

必须填补1下画布宽度与圆的半径的关联

假如1行3个圆，则有4个间隔，间隔的宽度与圆的直径同样，非常于7个直径，即14个半径

假如1行4个圆，则有5个间隔，间隔的宽度与圆的直径同样，非常于9个直径，即18个半径

假如1行n个圆，则有n+1个间隔，间隔的宽度与圆的直径同样，非常于2n+1个直径，即4n+2个半径

填补两个方式：

//以给定座标点为圆心画出单独圆
    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();
    }
    
    //绘图出全部的圆
    canvasLock.prototype.createCircle=function(){
        var n=this.circleNum;//1行几个圆
        var count=0;
        this.r=this.canvas.width/(4*n+2);//公式测算出每一个圆的半径
        this.lastPoint=[];//存储点一下过的圆的信息内容
        this.arr=[];//存储全部圆的信息内容
        this.restPoint=[];//存储未被点一下的圆的信息内容
        var r=this.r;

        for(var i=0;i<n;i++){
            for(var j=0;j<n;j++){
                count++;
                var obj={
                    x:(4*j+3)*r,
                    y:(4*i+3)*r,
                    index:count//给每一个圆标识数据库索引
                };
                this.arr.push(obj);
                this.restPoint.push(obj);//原始化时为全部点
            }
        }

        //清屏
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //以给定座标点为圆心画出全部圆
        for(var i=0;i<this.arr.length;i++){
            //循环系统启用画单独圆的方式
            this.drawCircle(this.arr[i].x,this.arr[i].y);
        }

    }

原始化的情况下记得启用

canvasLock.prototype.init=function(){
        //动态性转化成DOM
        this.initDom();

        //建立画布
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

        //绘图出全部的圆
        this.createCircle();
    }

别忘了在index.html中案例化时传入主要参数（1行界定几个圆）

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

实际效果图

3、canvas恶性事件实际操作——完成画圆和画线

getPosition方式用来获得电脑鼠标触碰点离canvas的间距（左侧和上边）

canvasLock.prototype.getPosition=function(e){
        var rect=e.currentTarget.getBoundingClientRect();//得到canvas间距显示屏的左右上下间距
        var po={
            //电脑鼠标与视口的左间距 - canvas间距视口的左间距 = 电脑鼠标与canvas的左间距
            x:(e.touches[0].clientX-rect.left),
            //电脑鼠标与视口的上间距 - canvas间距视口的上间距 = 电脑鼠标间距canvas的上间距
            y:(e.touches[0].clientY-rect.top)
        };
        return po;
    }

给canvas加上 touchstart 恶性事件，分辨触碰点是不是在圆内

触碰点在圆内则容许拖拽，并将该圆加上到 lastPoint 中，从 restPoint 中剔除

this.canvas.addEventListener("touchstart",function(e){
            var po=self.getPosition(e);//电脑鼠标间距canvas的间距

            //分辨是不是在圆内
            for(var i=0;i<self.arr.lenth;i++){
                if(Math.abs(po.x-self.arr[i].x)<self.r && Math.abs(po.y-self.arr[i].y)<self.r){
                    self.touchFlag=true;//容许拖拽
                    self.lastPoint.push(self.arr[i]);//点一下过的点
                    self.restPoint.splice(i,1);//剩余的点剔除这个被点一下的点
                    break;
                }
            }
        },false);

分辨是不是在圆内的基本原理：

圆心的x轴偏位和电脑鼠标点的x轴偏位的间距的肯定值小于半径

而且

圆心的y轴偏位和电脑鼠标点的y轴偏位的间距的肯定值小于半径

则能够分辨电脑鼠标坐落于圆内

给touchmove关联恶性事件，在触碰点挪动时给点一下过的圆画上实心圆，并画线

//触碰点挪动时的动漫
    canvasLock.prototype.update=function(po){
        //清屏，canvas动漫前务必清空原先的內容
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //以给定座标点为圆心画出全部圆
        for(var i=0;i<this.arr.length;i++){
            this.drawCircle(this.arr[i].x,this.arr[i].y);
        }

        this.drawPoint();//点一下过的圆画实心圆
        this.drawLine(po);//画线

    }

    //画实心圆
    canvasLock.prototype.drawPoint=function(){
        for(var i=0;i<this.lastPoint.length;i++){
            this.ctx.fillStyle="#abcdef";
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r/2,0,2*Math.PI,true);
            this.ctx.closePath();
            this.ctx.fill();
        }
    }

    //画线
    canvasLock.prototype.drawLine=function(po){
        this.ctx.beginPath();
        this.lineWidth=3;
        this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);//线条起始点
        for(var i=1;i<this.lastPoint.length;i++){
            this.ctx.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
        }
        this.ctx.lineTo(po.x,po.y);//触碰点
        this.ctx.stroke();
        this.ctx.closePath();
    }

实际效果图

4、canvas手式连接实际操作完成

在touchmove中填补当碰到下1个总体目标圆时的实际操作

//碰到下1个圆时只必须push到lastPoint之中去
        for(var i=0;i<this.restPoint.length;i++){
            if((Math.abs(po.x-this.restPoint[i].x)<this.r) && (Math.abs(po.y-this.restPoint[i].y)<this.r)){
                this.lastPoint.push(this.restPoint[i]);//将这个新点一下到的点存入lastPoint
                this.restPoint.splice(i,1);//从restPoint中剔除这个新点一下到的点
                break;
            }
        }

实际效果图

5、解锁取得成功与否的分辨

//设定登陆密码
    canvasLock.prototype.storePass=function(){
        if(this.checkPass()){
            document.getElementById("title").innerHTML="解锁取得成功";
            this.drawStatusPoint("lightgreen");
        }else{
            document.getElementById("title").innerHTML="解锁不成功";
            this.drawStatusPoint("orange");
        }
    }

    //分辨键入的登陆密码
    canvasLock.prototype.checkPass=function(){
        var p1="123",//取得成功的登陆密码
            p2="";
        for(var i=0;i<this.lastPoint.length;i++){
            p2+=this.lastPoint[i].index;
        }
        return p1===p2;
    }

    //绘图分辨完毕后的情况
    canvasLock.prototype.drawStatusPoint=function(type){
        for(var i=0;i<this.lastPoint.length;i++){
            this.ctx.strokeStyle=type;
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r,0,2*Math.PI,true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
    }

    //程序流程所有完毕后重设
    canvasLock.prototype.reset=function(){
        this.createCircle();
    }

大获全胜！！下面晒出全部编码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>手式解锁</title>
    <!-- 挪动端meta头 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style>
           body{background:pink;text-align: center;}
    </style>
</head>
<body>

    <script src="index.js"></script>
    <script>
        // circleNum:3 表明1行3个圆
        new canvasLock({circleNum:3}).init();
    </script>
  
</body>
</html>

index.js

// 密名涵数自实行
(function(){
    // canvasLock是全局性目标
    window.canvasLock=function(obj){
        this.width=obj.width;
        this.height=obj.height;
        this.circleNum=obj.circleNum;
    }
    //动态性转化成DOM
    canvasLock.prototype.initDom=function(){
        //建立1个div
        var div=document.createElement("div");
        var h4="<h4 id='title' class='title'>绘图解锁图案设计</h4>";
        div.innerHTML=h4;
        div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");

        //建立canvas
        var canvas=document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        //cssText 的实质便是设定 HTML 元素的 style 特性值
        canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";

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

        //设定canvas默认设置宽高
        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;

    }

    //以给定座标点为圆心画出单独圆
    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();
    }
    
    //绘图出全部的圆
    canvasLock.prototype.createCircle=function(){
        var n=this.circleNum;//1行几个圆
        var count=0;
        this.r=this.canvas.width/(4*n+2);//公式测算出每一个圆的半径
        this.lastPoint=[];//存储点一下过的圆的信息内容
        this.arr=[];//存储全部圆的信息内容
        this.restPoint=[];//存储未被点一下的圆的信息内容
        var r=this.r;

        for(var i=0;i<n;i++){
            for(var j=0;j<n;j++){
                count++;
                var obj={
                    x:(4*j+3)*r,
                    y:(4*i+3)*r,
                    index:count//给每一个圆标识数据库索引
                };
                this.arr.push(obj);
                this.restPoint.push(obj);//原始化时为全部点
            }
        }

        //清屏
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //以给定座标点为圆心画出全部圆
        for(var i=0;i<this.arr.length;i++){
            //循环系统启用画单独圆的方式
            this.drawCircle(this.arr[i].x,this.arr[i].y);
        }

    }

    //加上恶性事件
    canvasLock.prototype.bindEvent=function(){
        var self=this;

        this.canvas.addEventListener("touchstart",function(e){
            var po=self.getPosition(e);//电脑鼠标间距canvas的间距

            //分辨是不是在圆内
            for(var i=0;i<self.arr.length;i++){
                if((Math.abs(po.x-self.arr[i].x)<self.r) && (Math.abs(po.y-self.arr[i].y)<self.r)){
                    self.touchFlag=true;//容许拖拽
                    self.lastPoint.push(self.arr[i]);//点一下过的点
                    self.restPoint.splice(i,1);//剩余的点剔除这个被点一下的点
                    break;
                }
            }
        },false);

        this.canvas.addEventListener("touchmove",function(e){
            if(self.touchFlag){
                //触碰点挪动时的动漫
                self.update(self.getPosition(e));
            }
        },false);

        //触碰离去时
        this.canvas.addEventListener("touchend",function(e){
            if(self.touchFlag){
                self.storePass(self.lastPoint);
                setTimeout(function(){
                    self.reset();
                },300);
            }
        },false);

    }

    //设定登陆密码
    canvasLock.prototype.storePass=function(){
        if(this.checkPass()){
            document.getElementById("title").innerHTML="解锁取得成功";
            this.drawStatusPoint("lightgreen");
        }else{
            document.getElementById("title").innerHTML="解锁不成功";
            this.drawStatusPoint("orange");
        }
    }

    //分辨键入的登陆密码
    canvasLock.prototype.checkPass=function(){
        var p1="123",//取得成功的登陆密码
            p2="";
        for(var i=0;i<this.lastPoint.length;i++){
            p2+=this.lastPoint[i].index;
        }
        return p1===p2;
    }

    //绘图分辨完毕后的情况
    canvasLock.prototype.drawStatusPoint=function(type){
        for(var i=0;i<this.lastPoint.length;i++){
            this.ctx.strokeStyle=type;
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r,0,2*Math.PI,true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
    }

    //程序流程所有完毕后重设
    canvasLock.prototype.reset=function(){
        this.createCircle();
    }
    
    //获得电脑鼠标点一下处离canvas的间距
    canvasLock.prototype.getPosition=function(e){
        var rect=e.currentTarget.getBoundingClientRect();//得到canvas间距显示屏的左右上下间距
        var po={
            //电脑鼠标与视口的左间距 - canvas间距视口的左间距 = 电脑鼠标与canvas的左间距
            x:(e.touches[0].clientX-rect.left),
            //电脑鼠标与视口的上间距 - canvas间距视口的上间距 = 电脑鼠标间距canvas的上间距
            y:(e.touches[0].clientY-rect.top)
        };
        return po;
    }

    //触碰点挪动时的动漫
    canvasLock.prototype.update=function(po){
        //清屏，canvas动漫前务必清空原先的內容
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //以给定座标点为圆心画出全部圆
        for(var i=0;i<this.arr.length;i++){
            this.drawCircle(this.arr[i].x,this.arr[i].y);
        }

        // 电脑鼠标每挪动1下都会重绘canvas,update实际操作非常于每个move恶性事件都会开启
        this.drawPoint();//点一下过的圆画实心圆
        this.drawLine(po);//画线

        //碰到下1个圆时只必须push到lastPoint之中去
        for(var i=0;i<this.restPoint.length;i++){
            if((Math.abs(po.x-this.restPoint[i].x)<this.r) && (Math.abs(po.y-this.restPoint[i].y)<this.r)){
                this.lastPoint.push(this.restPoint[i]);//将这个新点一下到的点存入lastPoint
                this.restPoint.splice(i,1);//从restPoint中剔除这个新点一下到的点
                break;
            }
        }
    }

    //画实心圆
    canvasLock.prototype.drawPoint=function(){
        for(var i=0;i<this.lastPoint.length;i++){
            this.ctx.fillStyle="#abcdef";
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r/2,0,2*Math.PI,true);
            this.ctx.closePath();
            this.ctx.fill();
        }
    }

    //画线
    canvasLock.prototype.drawLine=function(po){
        this.ctx.beginPath();
        this.lineWidth=3;
        this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);//线条起始点
        for(var i=1;i<this.lastPoint.length;i++){
            this.ctx.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
        }
        this.ctx.lineTo(po.x,po.y);//触碰点
        this.ctx.stroke();
        this.ctx.closePath();
    }

    //init意味着原始化，程序流程的通道
    canvasLock.prototype.init=function(){
        //动态性转化成DOM
        this.initDom();

        //建立画布
        this.canvas=document.getElementById("canvas");
        this.ctx=this.canvas.getContext("2d");

        //默认设置不容许拖拽
        this.touchFlag=false;

        //绘图出全部的圆
        this.createCircle();

        //加上恶性事件
        this.bindEvent();
    }
})();

到此这篇有关canvas完成手机上的手式解锁的流程详尽 的文章内容就详细介绍到这了,更多有关canvas手式解锁內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

查看更多

新闻资讯



Copyright © 2002-2020 h5制作工具_做h5用什么软件比较好_微信开发者工具手机版_h5游戏制作网_h5制作平台 版权所有 （网站地图）　粤ICP备10235580号

在线客服

关闭

客户服务热线
4008-888-888

点击这里给我发消息 在线客服

点击这里给我发消息 在线客服

在线客服