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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vscode写vue代码时常用格式化设置，解决格式化函数名后空格消失问题等...
前端的 JavaScript Array（数组） 方法和对象
网友评论