1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>手机解锁</title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  7.         <style>
  8.             body{
  9.                 text-align: center;
  10.                 background: #305066;
  11.             }
  12.             h4{
  13.                 color: #22c3aa;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <script type="text/javascript" src="js/index.js"></script>
  19.         <script>
  20.             //1.生成背景
  21.             //2.动态title生成
  22.             //3.用js动态生成canvas标签
  23.             //4.js动态生成h3标签和canvas标签
  24.             new canvasLock({chooseType:3}).init();
  25.  
  26.         </script>
  27.     </body>
  28. </html>
  1. (function(){
  2.     /*
  3.       实现画圆和划线：
  4.       1.添加事件touchstart、touchmove、touchend
  5.       2.touchstart判断是否点击的位置处于园内getPosition,处于则初始化lastpoint、restPoint
  6.       3.touchmove做的就是：画圆drawPoint和划线drawLine
  7.     */
  8.     /*
  9.       实现自动画圆的效果
  10.       1.检测手势移动的位置是否处于圆内。
  11.       2.圆内的话则画圆 drawPoint
  12.       3.已经画过实心圆的圆，无需重复检测
  13.     */
  14.    /*
  15.       实现解锁成功：
  16.       1.检测路径是否是对的
  17.       2.如果是对的就重置，圆圈变绿
  18.       3.不对也重置，圆圈变红
  19.       4.重置
  20.    */
  21.     window.canvasLock = function(obj){
  22.         this.height = obj.height;
  23.         this.width = obj.width;
  24.         this.chooseType = obj.chooseType;
  25.  
  26.     };
  27.  
  28.     //js方式动态生成dom
  29.     canvasLock.prototype.initDom = function(){
  30.         var wrap = document.createElement('div');
  31.         var str = '<h4 id="title" class="title">绘制解锁图案</h4>';
  32.         wrap.setAttribute('style','position:absolute;top:0;left:0;right:0;bottom:0');
  33.  
  34.         var canvas = document.createElement('canvas');
  35.         canvas.setAttribute('id','canvas');
  36.         canvas.style.cssText = "background-color:#305066;display:inline-block;margin-top=15px";
  37.  
  38.         wrap.innerHTML = str;
  39.         wrap.appendChild(canvas);
  40.  
  41.         var width = this.width || 300;
  42.         var height = this.height || 300;
  43.  
  44.         document.body.appendChild(wrap);
  45.  
  46.         //高清屏锁放
  47.         canvas.style.width = width +"px";
  48.         canvas.style.height = height + "px";
  49.         //修改默认宽高
  50.         canvas.width = width;
  51.         canvas.height = height;
  52.     }
  53.     canvasLock.prototype.drawCle = function(x,y){  //初始化解锁密码面板，即画圆
  54.         this.ctx.strokeStyle = '#cfe6ef';
  55.         this.ctx.lineWidth = 2;
  56.         this.ctx.beginPath();
  57.         this.ctx.arc(x,y,this.r,0,Math.PI*2,true);
  58.         this.ctx.closePath();
  59.         this.ctx.stroke();
  60.  
  61.     }
  62.  
  63.     canvasLock.prototype.createCircle = function(){  //创建点的坐标，根据c
  64.         var n = this.chooseType;  //n是指有几行圆
  65.         var count = 0;
  66.         this.r = this.ctx.canvas.width / (2+4*n);
  67.         //圆心坐标
  68.         this.lastPoint = [];
  69.         this.arr = [];   //9个圆的中心点坐标
  70.         this.restPoint = [];  //还未选中的圆的个数
  71.         var r = this.r;
  72.         for(var i = 0;i < n;i++){
  73.             for(var j = 0;j < n; j++){
  74.                 count++;
  75.                 var obj = {
  76.                     x: j*4*r + 3*r,
  77.                     y: i*4*r + 3*r,
  78.                     index: count
  79.                 };
  80.                 this.arr.push(obj);
  81.                 this.restPoint.push(obj);
  82.             }
  83.         }
  84.         this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
  85.         for(var i = 0;i<this.arr.length;i++){
  86.             this.drawCle(this.arr[i].x,this.arr[i].y);
  87.         }
  88.     }
  89.  
  90.     //程序初始化
  91.     canvasLock.prototype.init = function(){
  92.         this.initDom();
  93.         this.canvas = document.getElementById('canvas');
  94.         this.ctx = this.canvas.getContext('2d');
  95.         this.touchFlag = false;
  96.         //1.确定半径 2.确定每一个圆的中心坐标点
  97.         //3.一行3个圆有14个半径，一行4个圆有18个半径
  98.         this.createCircle();
  99.         this.bindEvent();
  100.     }
  101.     //绑定事件
  102.     canvasLock.prototype.bindEvent = function(){
  103.         var self = this;  //一个是canvas对象，一个是window.canvasLock对象
  104.         console.log(this);  //如果直接使用this,那么this指向的就是当前时间调用的对象，也就是this.canvas,
  105.         console.log(self);  //但是在代码中想要使用的是window.canvasLock对象，所以在事件外面提前将this赋值给self变量，确保this的指向问题。
  106.         this.canvas.addEventListener('touchstart',function(e){
  107.             //2.touchstart判断是否点击的位置处于园内getPosition,处于则初始化lastpoint、restPoint
  108.             var po = self.getPosition(e);
  109.             //判断是否在圆内的原理：多出来的这条 x/y < r 在圆内
  110.             for(var i=0;i<self.arr.length;i++){
  111.                 if(Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r){
  112.                     self.touchFlag = true;
  113.                     self.lastPoint.push(self.arr[i]);  //把点击的圆心的x轴y轴坐标放入lastPoint数组
  114.                     console.log(self.lastPoint);
  115.                     self.restPoint.splice(i,1);
  116.                     break;
  117.                 }
  118.             }
  119.  
  120.         },false);
  121.         this.canvas.addEventListener('touchmove',function(e){
  122.             //  3.touchmove做的就是：画圆drawPoint和划线drawLine
  123.             if(self.touchFlag){
  124.                 self.update(self.getPosition(e));
  125.             }
  126.         },false);
  127.         this.canvas.addEventListener('touchend',function(e){
  128.             if(self.touchFlag){
  129.                 self.storePass(self.lastPoint);
  130.                 setTimeout(function(){
  131.                     self.reset();
  132.                 },300);
  133.             }
  134.         },false);
  135.     }
  136.     canvasLock.prototype.getPosition = function(e){  //获取touch点相对于canvas
  137.         //获取canvas上下左右离屏幕的距离
  138.         var rect = e.currentTarget.getBoundingClientRect();  // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
  139.         //po有x和y，并且使相较于canvas边距
  140.         var po = {
  141.             x: (e.touches[0].clientX - rect.left),
  142.             y: (e.touches[0].clientY - rect.top)
  143.         };
  144.         return po;
  145.     }
  146.  
  147.     canvasLock.prototype.update = function(po){
  148.         // 核心变换方法在touchmove时调用
  149.         //清空画布
  150.         this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
  151.         //重画9个圆
  152.         for(var i = 0;i < this.arr.length; i++){
  153.             this.drawCle(this.arr[i].x, this.arr[i].y);
  154.         }
  155.         this.drawPoint();  //画圆
  156.         this.drawLine(po);  //画线
  157.  
  158.         //1.检测手势移动的位置是否处于下一圆的圆内。
  159.         //2.圆内的话则画实心圆 drawPoint
  160.         //3.已经画过实心圆的圆，无需重复检测
  161.         for(var i = 0;i < this.restPoint.length;i++){
  162.             if(Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r){
  163.                 this.drawPoint();
  164.                 this.lastPoint.push(this.restPoint[i]);
  165.                 this.restPoint.splice(i,1);  //画完一个圆就将该圆从restPoint数组中去掉
  166.                 break;
  167.             }
  168.         }
  169.     }
  170.     canvasLock.prototype.drawLine = function(po){  //解锁轨迹
  171.         this.ctx.beginPath();
  172.         this.ctx.lineWidth = 3;
  173.         this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
  174.         for(var i = 1; i < this.lastPoint.length; i++){
  175.             this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
  176.         }
  177.         this.ctx.lineTo(po.x, po.y);
  178.         this.ctx.stroke();
  179.         this.ctx.closePath();
  180.     }
  181.     canvasLock.prototype.drawPoint = function(){  //初始化圆心
  182.         for(var i = 0; i < this.lastPoint.length;i++){
  183.             this.ctx.fillStyle = '#cfe6fe';
  184.             this.ctx.beginPath();
  185.             this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r/2, 0, Math.PI*2, true);
  186.             this.ctx.closePath();
  187.             this.ctx.fill();
  188.         }
  189.     }
  190.  
  191.     canvasLock.prototype.storePass = function(){
  192.  
  193.         if(this.checkPass()){
  194.             document.getElementById('title').innerHTML = '解锁成功';
  195.             this.drawStatusPoint('#2cff26');
  196.         }else{
  197.             document.getElementById('title').innerHTML = '解锁失败';
  198.             this.drawStatusPoint('red');
  199.         }
  200.     }
  201.     canvasLock.prototype.checkPass = function(){
  202.         var p1 = '123';
  203.         p2 = '';
  204.         for(var i = 0; i < this.lastPoint.length; i++){
  205.             p2 += this.lastPoint[i].index;
  206.         }
  207.         return p1 === p2;
  208.     }
  209.     canvasLock.prototype.drawStatusPoint = function(type){
  210.         for(var i = 0; i < this.lastPoint.length; i++){
  211.             this.ctx.strokeStyle = type;
  212.             this.ctx.beginPath();
  213.             this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI*2, true);
  214.             this.ctx.closePath();
  215.             this.ctx.stroke();
  216.         }
  217.     }
  218.     canvasLock.prototype.reset = function(){
  219.         this.createCircle();
  220.     }
  221. })();

canvas——绘制解锁图案的更多相关文章

  1. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. 粒子系统（二）：Canvas绘制精美图案

    准备 IDE:Visual Studio Code Language:JavaScript / ECMAScript 6+ GitHub:Natural2D.JS 本文主要讲述 Particles - ...

  3. canvas 实现手机图案解锁

    参考☞: https://www.cnblogs.com/chenyingying0/ 先上效果图: 我是在 vue 里面实现js 文件 ,所以如果需要在vue 里面使用 可以将以下内容import  ...

  4. canvas手势解锁源码

    先放图 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  6. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

  7. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

  8. html5--5-14 阶段小练习：绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. Lesson2 Thirteen equals one

    ​ Lesson2 Thirteen equals one equal ['i:kwəl] v. 等于 He equaled the world record. Nobody equals him i ...

  2. 【系统学习ES6】新专题发布

    我要发免费专题了,向下看 公众号和博客都有一阵没更新了,丢了一些粉儿,但是也很庆幸,时时还会有人关注.我并不是什么专业讲师,文章都是利用业余时间手工原创.在这里非常感谢各位的支持和厚爱. 这个月开始, ...

  3. Vulnhub -- DC1靶机渗透

    信息收集 开启了 22端口,ssh服务 80,http服务 111,RPC服务 先观察80端口 发现采用的是Drupal的cms 目录爆破: 但是,没有找到可以直接利用的点 登录的页面进行SQL注入即 ...

  4. jvm源码解读--17 Java的wait()、notify()学习

    write and debug by 张艳涛 wait()和notify()的通常用法 A线程取得锁,执行wait(),释放锁; B线程取得锁,完成业务后执行notify(),再释放锁; B线程释放锁 ...

  5. DC-7靶机

    仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-7.zip 一.主机扫描 二.信息收集 或者 python3 cmseek.py --url h ...

  6. 在Mac上安装Istio并使用，有丰富的监控Kiali、Grafana、Jaeger

    我最新最全的文章都在南瓜慢说 www.pkslow.com,文章更新也只在官网,欢迎大家来喝茶~~ 1 简介 之前在文章<服务网格Istio入门-详细记录Kubernetes安装Istio并使用 ...

  7. Android Jetpack 架构组件最佳实践之“网抑云”APP

    背景 近几年,Android 相关的新技术层出不穷.往往这个技术还没学完,下一个新技术又出来了.很多人都是一脸黑人问号? 不少开发者甚至开始哀嚎:"求求你们别再创造新技术了,我们学不动了!& ...

  8. Prettier-Code Formater代码格式化插件使用教程

    目录 Prettier-Code Formater代码格式化插件使用教程 插件的安装 插件的使用 方式一: 配置VScode代码格式化后, 结合VScode快捷键使用 方式二: CLI中使用命令行的方 ...

  9. PHP构造函数__construct()

    (!注意,__construct()前的"__"是两个"_",也就是"_ _") 在PHP5.0后的版本,允许开发者设定一个构造函数,来初始 ...

  10. 【javaFX学习】（三） 控件手册

    移至http://blog.csdn.net/qq_37837828/article/details/78732605 更新 这里写的控件可能不是所有的控件,但是应该是比较齐全并足够用的了,后面还有图 ...