151-3895-5886
 

javascript+html5实现九宫格密码解锁功能

2018-08-05 浏览:
HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,郑州网站建设融科网络一起与你分享一下!
 
效果截图如下:
 
九宫格代码
效果看起来还不错吧!
 
源码如下:
<!DOCTYPE html> <html> <head lang="zh-CN">   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>   <meta charset="UTF-8">   <title>html5实现网页解锁功能</title>   <style type="text/css">     html, body {       margin: 0;       padding: 0;       width: 100%;       height: 100%;     }   </style>   <script type="text/javascript">    /**    * 半径,画布宽度,画布高度,画布x内边距,画布y内边距    */     var R = 26, canvasWidth = 400, canvasHeight = 320, OffsetX = 30, OffsetY = 30;    var circleArr = [];     function createCirclePoint(diffX, diffY) {       for (var row = 0; row < 3; row++) {         for (var col = 0; col < 3; col++) {          // 计算圆心坐标           var Point = {             X: (OffsetX + col * diffX + ( col * 2 + 1) * R),             Y: (OffsetY + row * diffY + (row * 2 + 1) * R)           };           circleArr.push(Point);         }       }     }     window.onload = function () {       var canvas = document.getElementById("lockCanvas");       canvasWidth = document.body.offsetWidth;//网页可见区域宽       canvas.width = canvasWidth;       canvas.height = canvasHeight;       var cxt = canvas.getContext("2d");       /**        * 每行3个圆        * OffsetX为canvas x方向内边距        * */       var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;       var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;               createCirclePoint(X, Y);               bindEvent(canvas, cxt);       //CW=2*offsetX+R*2*3+2*X       Draw(cxt, circleArr, [],null);     }     function Draw(cxt, circleArr, pwdArr,touchPoint) {       if (pwdArr.length > 0) {         cxt.beginPath();         for (var i = 0; i < pwdArr.length; i++) {           var pointIndex = pwdArr[i];           cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);         }         cxt.lineWidth = 10;         cxt.strokeStyle = "#627eed";         cxt.stroke();         cxt.closePath();         if(touchPoint!=null){           var lastPointIndex=pwdArr[pwdArr.length-1];           var lastPoint=circleArr[lastPointIndex];           cxt.beginPath();           cxt.moveTo(lastPoint.X,lastPoint.Y);           cxt.lineTo(touchPoint.X,touchPoint.Y);           cxt.stroke();           cxt.closePath();         }       }       for (var i = 0; i < circleArr.length; i++) {         var Point = circleArr[i];         cxt.fillStyle = "#627eed";         cxt.beginPath();         cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);         cxt.closePath();         cxt.fill();         cxt.fillStyle = "#ffffff";         cxt.beginPath();         cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);         cxt.closePath();         cxt.fill();         if(pwdArr.indexOf(i)>=0){           cxt.fillStyle = "#627eed";           cxt.beginPath();           cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);           cxt.closePath();           cxt.fill();         }          }     }           /**      * 计算选中的密码       */     function getSelectPwd(touches,pwdArr){       for (var i = 0; i < circleArr.length; i++) {         var currentPoint = circleArr[i];         var xdiff = Math.abs(currentPoint.X - touches.pageX);         var ydiff = Math.abs(currentPoint.Y - touches.pageY);         var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);         if(dir > R || pwdArr.indexOf(i) >= 0)          continue;          pwdArr.push(i);          break;       }     }           /**      * 给画布绑定事件      */     function bindEvent(canvas, cxt) {       var pwdArr = [];       canvas.addEventListener("touchstart", function (e) {         getSelectPwd(e.touches[0],pwdArr);       }, false);       canvas.addEventListener("touchmove", function (e) {         e.preventDefault();         var touches = e.touches[0];         getSelectPwd(touches,pwdArr);         cxt.clearRect(0,0,canvasWidth,canvasHeight);         Draw(cxt,circleArr,pwdArr,{X:touches.pageX,Y:touches.pageY});       }, false);       canvas.addEventListener("touchend", function (e) {         cxt.clearRect(0,0,canvasWidth,canvasHeight);         Draw(cxt,circleArr,pwdArr,null);         alert("密码结果是:"+pwdArr.join("->"));         pwdArr=[];       }, false);     }   </script> </head> <body> <canvas id="lockCanvas"></canvas> </body> </html> 
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持融科网络。
 
郑州融科网络专注于企业网站建设、网站制作、高端网站设计,郑州荥阳、上街做网站就找融科网络!
本文章网址:http://www.ppssdd.com/code/373.html。转载请保留出处,谢谢合作!
文章标签: 代码 HTML 融科网络 javascrip
 
阅读下一篇
织梦安全设置及网站安全汇总教程
 
 
推荐阅读
公司在网站是不是需求策划?
什么是网站收录?新网站多久能收
aspcms模板自定义幻灯片如何修改
企业做网站如何准备资料?
三招教你快速成为一个SEO高手
优质的外链入口,谈谈微博外链的
学SEO需要具备的哪些技能知识
郑州网站建设谈企业建设官网一般
对程序员非常重要的24个软技能
网站制作一般怎样去设计网站导航
郑州网站建设融科网络微信二维码
 
准备开展业务?
郑州建站咨询服务
联系专业的商务顾问,诊查网站现状及关键词、分析竞争对手的流量、一对一咨询、及其报价详情