js+html5实现手机九宫格密码解锁功能
程序员文章站
2022-07-06 12:03:47
html5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!
效果截图如下:
效果看起来还不错吧!
源码如下:...
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。