当前位置 : 主页 > 网页制作 > html >

canvas——绘制解锁图案

来源:互联网 收集:自由互联 发布时间:2021-06-12
! DOCTYPE html html head meta charset ="utf-8" title 手机解锁 / title meta name ="viewport" content ="width=device-width,initial-scale=1.0,user-scalable=no" / style body { text-align : center ; background : #305066 ; } h4 { color : #22c

分享图片

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>手机解锁</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
        <style>
            body{
                text-align: center;
                background: #305066;
            }
            h4{
                color: #22c3aa;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="js/index.js"></script>
        <script>
            //1.生成背景
            //2.动态title生成
            //3.用js动态生成canvas标签
            //4.js动态生成h3标签和canvas标签
            new canvasLock({chooseType:3}).init();
            
        </script>
    </body>
</html>

 

 

(function(){
    /*
      实现画圆和划线:
      1.添加事件touchstart、touchmove、touchend
      2.touchstart判断是否点击的位置处于园内getPosition,处于则初始化lastpoint、restPoint
      3.touchmove做的就是:画圆drawPoint和划线drawLine
    */
    /*
      实现自动画圆的效果
      1.检测手势移动的位置是否处于圆内。
      2.圆内的话则画圆 drawPoint
      3.已经画过实心圆的圆,无需重复检测
    */
   /*
      实现解锁成功:
      1.检测路径是否是对的
      2.如果是对的就重置,圆圈变绿
      3.不对也重置,圆圈变红
      4.重置
   */
    window.canvasLock = function(obj){
        this.height = obj.height;
        this.width = obj.width;
        this.chooseType = obj.chooseType;
        
    };
    
    //js方式动态生成dom
    canvasLock.prototype.initDom = function(){
        var wrap = document.createElement(‘div‘);
        var str = ‘<h4 id="title" class="title">绘制解锁图案</h4>‘;
        wrap.setAttribute(‘style‘,‘position:absolute;top:0;left:0;right:0;bottom:0‘);
        
        var canvas = document.createElement(‘canvas‘);
        canvas.setAttribute(‘id‘,‘canvas‘);
        canvas.style.cssText = "background-color:#305066;display:inline-block;margin-top=15px";
        
        wrap.innerHTML = str;
        wrap.appendChild(canvas);
        
        var width = this.width || 300;
        var height = this.height || 300;
        
        document.body.appendChild(wrap);
        
        //高清屏锁放
        canvas.style.width = width +"px";
        canvas.style.height = height + "px";
        //修改默认宽高
        canvas.width = width;
        canvas.height = height;
    }
    canvasLock.prototype.drawCle = function(x,y){  //初始化解锁密码面板,即画圆
        this.ctx.strokeStyle = ‘#cfe6ef‘;
        this.ctx.lineWidth = 2;
        this.ctx.beginPath();
        this.ctx.arc(x,y,this.r,0,Math.PI*2,true);
        this.ctx.closePath();
        this.ctx.stroke();
        
    }
    
    canvasLock.prototype.createCircle = function(){  //创建点的坐标,根据c
        var n = this.chooseType;  //n是指有几行圆
        var count = 0;
        this.r = this.ctx.canvas.width / (2+4*n);
        //圆心坐标
        this.lastPoint = [];  
        this.arr = [];   //9个圆的中心点坐标
        this.restPoint = [];  //还未选中的圆的个数
        var r = this.r;
        for(var i = 0;i < n;i++){
            for(var j = 0;j < n; j++){
                count++;
                var obj = {
                    x: j*4*r + 3*r,
                    y: i*4*r + 3*r,
                    index: count
                };
                this.arr.push(obj);
                this.restPoint.push(obj);
            }
        }
        this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
        for(var i = 0;i<this.arr.length;i++){
            this.drawCle(this.arr[i].x,this.arr[i].y);
        }
    }
    
    //程序初始化
    canvasLock.prototype.init = function(){
        this.initDom();
        this.canvas = document.getElementById(‘canvas‘);
        this.ctx = this.canvas.getContext(‘2d‘);
        this.touchFlag = false;
        //1.确定半径 2.确定每一个圆的中心坐标点
        //3.一行3个圆有14个半径,一行4个圆有18个半径
        this.createCircle();
        this.bindEvent();
    }
    //绑定事件
    canvasLock.prototype.bindEvent = function(){
        var self = this;  //一个是canvas对象,一个是window.canvasLock对象
        console.log(this);  //如果直接使用this,那么this指向的就是当前时间调用的对象,也就是this.canvas,
        console.log(self);  //但是在代码中想要使用的是window.canvasLock对象,所以在事件外面提前将this赋值给self变量,确保this的指向问题。
        this.canvas.addEventListener(‘touchstart‘,function(e){
            //2.touchstart判断是否点击的位置处于园内getPosition,处于则初始化lastpoint、restPoint
            var po = self.getPosition(e);
            //判断是否在圆内的原理:多出来的这条 x/y < r 在圆内
            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]);  //把点击的圆心的x轴y轴坐标放入lastPoint数组
                    console.log(self.lastPoint);
                    self.restPoint.splice(i,1);
                    break;
                }
            }
            
        },false);
        this.canvas.addEventListener(‘touchmove‘,function(e){
            //  3.touchmove做的就是:画圆drawPoint和划线drawLine
            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.getPosition = function(e){  //获取touch点相对于canvas
        //获取canvas上下左右离屏幕的距离
        var rect = e.currentTarget.getBoundingClientRect();  // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
        //po有x和y,并且使相较于canvas边距
        var po = {
            x: (e.touches[0].clientX - rect.left),
            y: (e.touches[0].clientY - rect.top)
        };
        return po;
    }
        
    
    canvasLock.prototype.update = function(po){  
        // 核心变换方法在touchmove时调用
        //清空画布
        this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
        //重画9个圆
        for(var i = 0;i < this.arr.length; i++){
            this.drawCle(this.arr[i].x, this.arr[i].y);
        }
        this.drawPoint();  //画圆
        this.drawLine(po);  //画线
        
        //1.检测手势移动的位置是否处于下一圆的圆内。
        //2.圆内的话则画实心圆 drawPoint
        //3.已经画过实心圆的圆,无需重复检测
        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.drawPoint();
                this.lastPoint.push(this.restPoint[i]);
                this.restPoint.splice(i,1);  //画完一个圆就将该圆从restPoint数组中去掉
                break;
            }
        }
    }  
    canvasLock.prototype.drawLine = function(po){  //解锁轨迹
        this.ctx.beginPath();
        this.ctx.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();
    }
    canvasLock.prototype.drawPoint = function(){  //初始化圆心
        for(var i = 0; i < this.lastPoint.length;i++){
            this.ctx.fillStyle = ‘#cfe6fe‘;
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r/2, 0, Math.PI*2, true);
            this.ctx.closePath();
            this.ctx.fill();
        }
    }
    
    canvasLock.prototype.storePass = function(){
        
        if(this.checkPass()){
            document.getElementById(‘title‘).innerHTML = ‘解锁成功‘;
            this.drawStatusPoint(‘#2cff26‘);
        }else{
            document.getElementById(‘title‘).innerHTML = ‘解锁失败‘;
            this.drawStatusPoint(‘red‘);
        }
    }
    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, Math.PI*2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
    }
    canvasLock.prototype.reset = function(){
        this.createCircle();
    }
})();
上一篇:使用node搭建简单的服务
下一篇:rem布局
网友评论