首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onMarch 16, 2020

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

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

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(){
        //创建一个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();

效果图

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

2、 画圆函数

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

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

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

如果一行n个圆，则有n+1个间距，间距的宽度与圆的直径相同，相当于2n+1个直径，即4n+2个半径

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

补充两个方法：

//以给定坐标点为圆心画出单个圆
    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;//一行几个圆
        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();

效果图

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

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);

判断是否在圆内的原理：

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

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

效果图

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

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;
            }
        }

效果图

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

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-8">
    <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 表示一行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.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;//一行几个圆
        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);
        }

        // 鼠标每移动一下都会重绘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.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手势解锁内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

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

- Author -

麦叶

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
浅析CSS3 中的 transition，transform，translate之间区别和作用
Mar 26 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 #HTML / CSS
html5默认气泡修改的代码详解
Mar 13 #HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 #HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 #HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 #HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
hashlib(1) requests(1) 慢日志(1) mt-swipe(1) 相对路径 (1) 面向对象(3) Mint UI(1) 相对路径(1) openpyxl(1) hmac(1)
You might like
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
JS 时间显示效果代码
2009/08/23 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
详解Vite的新体验
2021/02/22 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
python psutil库安装教程
2018/03/19 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
Hotels.com爱尔兰：全球酒店预订
2017/02/24 全球购物
《童年》教学反思
2014/02/18 职场文书
小露珠教学反思
2014/04/30 职场文书
学校课外活动总结
2014/05/08 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书