HTML5实现手机屏幕解锁功能
来源:互联网 发布:单片机原理经典教材 编辑:程序博客网 时间:2024/04/28 09:53
HTML5实现手机屏幕解锁功能
代码如下
<!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>
效果不错可以试着看看,
0 0
- HTML5实现手机屏幕解锁功能
- Html5实现手机九宫格密码解锁功能
- Html5实现手机九宫格密码解锁功能
- HTML5实现屏幕手势解锁
- html5下划手机屏幕,实现数据加载
- html5实现图片自适应手机屏幕页面的css
- HTML5实现刮刮卡功能
- html5实现摇一摇功能
- HTML5实现摇一摇功能
- html5实现摇一摇功能
- 如何实现锁定解锁工具栏的功能
- 如何实现锁定解锁工具栏的功能
- android图案解锁功能的实现
- [Unity3D]使用GL实现图案解锁功能
- CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
- HTML5自适应手机屏幕
- android 点亮手机屏幕与屏幕解锁方法
- html5实现录音、拍摄功能
- Notepad++宏如何备份导出
- c++ 封装哈希表(Hash) 以及实现迭代器(iterator)
- [Coursera]算法基础_Week9_考试_Q5
- Educational Codeforces Round 2 B. Queries about less or equal elements
- PHP面向对象之重写与重载
- HTML5实现手机屏幕解锁功能
- 关于position: fixed学习,顶部固定导航
- [Coursera]算法基础_Week9_考试_Q6
- android调用系统相机,获取照片的适配性问题
- java 函数形参传值和传引用的区别
- 根据当前日期获取下一个编号的SQL语句
- NSUserDefaults standardUserDefaults中在最后使用synchronize的作用
- Hybrid移动APP开发(一):Cordova+Ionic+Angularjs环境配置
- Hive Metastore实践总结