移动端手势密码

PROMULGATOR

snoopy1360

上海市

← 简单的日历

→ vue移动端长按事件

相关代码

移动端手势密码

模仿手机图形解锁（原创）

移动端拖动div

模仿手机端密码输入

jQuery移动端手指按住显示密码

H5密码输入自动跳格效果

js滑动解锁（原创）

Html

Css

Js

 html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

var R = 26;
var reachPoind = [-1];

function draw(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, R, 0, 2 * Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x, y, R - 3, 0, 2 * Math.PI);
    ctx.fillStyle = "#fff";
    ctx.fill();
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var wid = document.body.offsetWidth;
var hei = 320;
c.width = wid;
c.height = hei;
xpos = Math.ceil((wid - (R) * 6) / 2) - 24;
ypos = Math.ceil((hei - (R) * 6) / 2) - 24;
var arr1 = [];
for (var j = 0; j < 3; j++) {
    for (var i = 0; i < 3; i++) {
        var point = {};
        point.x = 50 + xpos * i + R * 2 * i;
        point.y = 50 + ypos * j + R * 2 * j;
        arr1.push(point);
        draw(point.x, point.y);
        ctx.closePath();
    }
}
c.addEventListener('touchstart', onTouchStart, false);
c.addEventListener('touchmove', onTouchMove, false);
c.addEventListener('touchend', onTouchEnd, false);

function onTouchStart(e) {
    var tempx = e.touches[0].pageX;
    var tempy = e.touches[0].pageY;
    isSelect(tempx, tempy)
}

function onTouchMove(e) {
    var tempx = e.touches[0].pageX;
    var tempy = e.touches[0].pageY;
    isSelect(tempx, tempy);
    ctx.clearRect(0, 0, wid, hei);
    redraw(tempx, tempy, true)
}
var iInt;

function isSelect(tempx, tempy) {
    var xdiff;
    var ydiff;
    for (var i in arr1) {
        xdiff = Math.abs(tempx - arr1[i].x);
        ydiff = Math.abs(tempy - arr1[i].y);
        var tempR = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
        if (tempR < R) {
            drawstop(i)
            return
        }
    }
}

function drawstop(i) {
    ctx.beginPath();
    ctx.arc(arr1[i].x, arr1[i].y, 10, 0, 2 * Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
    iInt = i;
    for (var i in reachPoind) {
        if (iInt == reachPoind[i]) {
            return;
        } else {
            if (i == reachPoind.length - 1) {
                reachPoind.push(iInt);
            }
        }
    }
}

function drawline(arr, x, y, bol) {
    ctx.beginPath();
    for (var i in arr) {
        if (i != 0) {
            if (i == 1) {
                ctx.moveTo(arr1[arr[i]].x, arr1[arr[i]].y);
            } else {
                ctx.lineTo(arr1[arr[i]].x, arr1[arr[i]].y);
            }
        }
    }
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 10;
    ctx.stroke();
    if (bol) {
        ctx.beginPath();
        ctx.moveTo(arr1[arr[arr.length - 1]].x, arr1[arr[arr.length - 1]].y);
        ctx.lineTo(x, y);
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 10;
        ctx.stroke();
    }
}

function onTouchEnd(e) {
    ctx.clearRect(0, 0, wid, hei);
    redraw(e.changedTouches[0].clientX, e.changedTouches[0].clientY, false);
    var temp = [];
    for (var i in reachPoind) {
        temp.push(reachPoind[i])
    }
    alert(temp);
    reachPoind = [-1];
}

function redraw(tempx, tempy, bol) {
    drawline(reachPoind, tempx, tempy, bol); //画线
    for (var i in arr1) { //画圆
        draw(arr1[i].x, arr1[i].y);
    }
    for (var i in reachPoind) { //画点
        if (i != 0) {
            drawstop(reachPoind[i]);

}
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

移动端手势密码



代码描述：用谷歌模仿移动端调试，否则无效，原创代码，写的烂请勿喷

注：请在移动端查看效果或用谷歌模仿移动端调试，PC端无效果
因为调用事件是touch，纯canvas打造，无任何插件

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>移动端手势密码-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号