canvas实现手机的手势解锁的步骤详细

本文介绍了canvas手机的手势解锁，分享给大家，顺便给自己留个笔记，废话不多说，具体如下：

按照国际惯例，先放效果图

1、js动态初始化dom结构

首先在index.html中添加基本样式

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

加个移动端meta头

<meta name="viewport" con天文学知识tent="width=device-width,initial-scale=1.0,ur-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(){        //创建一个div        var div=document.createelement("div");        var h4="<h4 id='title' class='title'>绘制解锁图案</h4>";        div.innerhtml=h4;        div.tattribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");        //创建canvas        var canvas=document.createelement("canvas");        canvas.tattribute("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;        c数学家的小故事简短anvas.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、 画圆函数

需要补充一下画布宽度与圆的半径的关系

如果一行3个圆，则有4个间距，间距的宽度与圆的直径相同，相当于7个直径，即14个半径

如果一行4个圆，则有5个间距，间距的宽度与圆的直径相同，相当于9个直径，即18个半径

如果一行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.clopath();        this.ctx.stroke();    }        //绘制出所有的圆    canvaslock.prototype.createcircle=function(){        var n=this.circlenum;//一行几个圆        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中实例化时传入参数（一行定义几个圆）

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=lf.getposition(e);//鼠标距离canvas的距离            //判断是否在圆内            for(var i=0;i<lf.arr.lenth;i++){                if(math.abs(po.x-lf.arr[i].x)<lf.r && math.abs(po.y-lf.arr[i].y)<lf.r){                    lf.touchflag=true;//允许拖拽                    lf.lastpoint.push(lf.arr[i]);//点击过的点                    lf.restpoint.splice(i,1);//剩下的点剔除这个被点击的点                    break;                }            }        },fal);

判断是否在圆内的原理：

圆心的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.clopath();            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.clopath();    }

效果图

4、canvas手势链接操作实现

在touchmove中补充当碰到下一个目标圆时的操作

//碰到下一个圆时只需要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");        }el{            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.clopath();            this.ctx.stroke();        }    }    //程序全部结束后重置    canvaslock.prototype.ret=function(){        this.createcircle();    }

大功告成！！下面晒出所有代码

index.html

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>手势解锁</title>    <!-- 移动端meta头 -->    <meta name="viewport" content="width=device-width,initial-scale=1.0,ur-scalable=no">    <style>           body{background:pink;text-align: center;}    </style></head><body>    <script src="index.js"></script>    <script>        // circlenum:3 表示一行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(){        //创建一个div        var div=document.createelement("div");        var h4="<h4 id='title' class='title'>绘制解锁图案</h4>";        div.innerhtml=h4;        div.tattribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");        //创建canvas        var canvas=document.createelement("canvas");        canvas.tattribute("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.clopath();        this.ctx.stroke();    }        //绘制出所有的圆    canvaslock.prototype.createcircle=function(){        var n=this.circlenum;//一行几个圆        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 lf=this;        this.canvas.addeventlistener("touchstart",function(e){        成功是成功之母作文    var po=lf.getposition(e);//鼠标距离canvas的距离            //判断是否在圆内            for(var i=0;i<lf.arr.length;i++){                if((math.abs(po.x-lf.arr[i].x)<lf.r) && (math.abs(po.y-lf.arr[i].y)<lf.r)){                    lf.touchfla跨过千年来爱你g=true;//允许拖拽                    lf.lastpoint.push(lf.arr[i]);//点击过的点                    lf.restpoint.splice(i,1);//剩下的点剔除这个被点击的点                    break;                }            }        },fal);        this.canvas.addeventlistener("touchmove",function(e){            if(lf.touchflag){                //触摸点移动时的动画                lf.update(lf.getposition(e));            }        },fal);        //触摸离开时        this.canvas.addeventlistener("touchend",function(e){            if(lf.touchflag){                lf.storepass(lf.lastpoint);                ttimeout(function(){                    lf.ret();                },300);            }        },fal);    }    //设置密码    canvaslock.prototype.storepass=function(){        if(this.checkpass()){            document.getelementbyid("title").innerhtml="解锁成功";            this.drawstatuspoint("lightgreen");        }el{            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.clopath();            this.ctx.stroke();        }    }    //程序全部结束后重置    canvaslock.prototype.ret=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);        }        // 鼠标每移动一下都会重绘canvas,update操作相当于每一个move事件都会触发        this.drawpoint();//点击过的圆画实心圆        this.drawline(po);//画线        //碰到下一个圆时只需要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.clopath();            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.clopath();    }    //init代表初始化，程序的入口    canvaslock.prototype.init=function(){        //动态生成dom        this.initdom();        //创建画布        this.canvas=document.getelementbyid("canvas");        this.ctx=this.canvas.getcontext("2d");        //默认不允许拖拽        this.touchflag=fal;        //绘制出所有的圆        this.createcircle();        //添加事件        this.bindevent();    }})();

到此这篇关于canvas实现手机的手势解锁的步骤详细 的文章就介绍到这了,更多相关canvas手势解锁内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！