Html5实现手机九宫格密码解锁功能
教程管理员 发布于2023-09-26 23:05 HTML教程 126
简介:
<p>HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!</p>
<p>效果截图如下:</p>
<p><img src="http://img.blog.csdn.net/20151210172338673?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon
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>好了下班了,就写这么多了!
欢迎大家关注我的博客,如有疑问,请加qq群:454796847、135430763 共同进步!
相关推荐
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 10-04 ie下tbody的innerhtml属性只读
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-