浅谈移动设备手势密码组件的canvas实现

秒速五厘米 2022-06-18 10:28 210阅读 0赞

function Gesture(width, height) {
        this.width = width; 
        this.height = height;
    	this.r = width * 0.8 / 14;
    }
    
    Gesture.prototype.init = function() {
    	var container = document.createElement('div');
    	container.innerHTML = '<header><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div id="chinaMobile">中国移动</div><div id="time">1</div></header><nav>手势密码</nav><article><canvas id="canvas" width="' + this.width * 0.8 + '" height="' + this.width * 0.8 + '">浏览器不支持canvas元素</canvas></article><section>请输入手势密码</section><aside><input type="radio" name="password" value="setPassword" checked><span>设置密码</span><br><input type="radio" name="password" value="validatePassword"><span>验证密码</span></aside>';
    	document.getElementsByTagName("body")[0].appendChild(container);
    	var date = new Date();
    	var hour = date.getHours();
    	var minute = date.getMinutes();
    	if (hour == 12 && minute == 0) 
    		document.getElementById("time").innerText = "12:00 AM";	
    	else if (hour < 12) 
    		minute >= 10 ? document.getElementById("time").innerText = hour + ":" + minute + " AM" : document.getElementById("time").innerText = hour + ":0" + minute + " AM";
    	else if (hour == 12)
    		minute >= 10 ? document.getElementById("time").innerText = "12:" + minute + " PM" : document.getElementById("time").innerText = "12:0" + minute + " PM";
    	else
    		minute >= 10 ? document.getElementById("time").innerText = hour % 12 + ":" + minute + " PM" : document.getElementById("time").innerText = hour % 12 + ":0" + minute + " PM";
    	this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
    	this.state = 0;
    	this.radio = 0;
    	this.selectPoints = [];
    	this.ninePoints = [];
    	this.marginX = this.canvas.offsetLeft;
    	this.marginY = this.canvas.offsetTop;
    	this.caculateLocation();
    	for (var i = 0; i < this.ninePoints.length; i++) {
    		this.strokeCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#cccccc", 10);
    		this.fillCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ffffff");
    	}
    	this.eventHandler();
    }
    
    Gesture.prototype.caculateLocation = function() {
    	for (var i = 0; i < 3; i++) {
    		for (var j = 0; j < 3; j++) {
    			var point = {
    				x: 4 * this.r * j + 3 * this.r,
    				y: 4 * this.r * i + 3 * this.r
    			};
    			this.ninePoints.push(point);
    		}
    	}
    };
    
    Gesture.prototype.strokeCircle = function(x, y, r, color, lineWidth) {
    	this.context.lineWidth = lineWidth;
    	this.context.strokeStyle = color;
    	this.context.beginPath();
    	this.context.arc(x, y, r, 0, Math.PI * 2, true);
    	this.context.stroke();
    	this.context.closePath();
    }
    
    Gesture.prototype.fillCircle = function(x, y, r, color) {
    	this.context.fillStyle = color;
    	this.context.beginPath();
    	this.context.arc(x, y, r, 0, Math.PI * 2, true);
    	this.context.fill();
    	this.context.closePath();
    }
    
    Gesture.prototype.drawLine = function(touchPoint, color, lineWidth) {
    	this.context.beginPath();
        this.context.strokeStyle = color;
        this.context.lineWidth = lineWidth;
        this.context.moveTo(this.ninePoints[this.selectPoints[0]].x, this.ninePoints[this.selectPoints[0]].y);
        for (var i = 1; i < this.selectPoints.length; i++) 
            this.context.lineTo(this.ninePoints[this.selectPoints[i]].x, this.ninePoints[this.selectPoints[i]].y);
    	this.context.lineTo(touchPoint.x, touchPoint.y);
        this.context.stroke();
        this.context.closePath();
    }
    
    Gesture.prototype.draw = function(touchPoint) {
    	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    	for (var i = 0; i < this.ninePoints.length; i++) {
    		if (this.selectPoints.indexOf(i) == -1) { 
    			this.strokeCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#cccccc", 10);
    			this.fillCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ffffff");
    		}
    		else {
    			this.strokeCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ff5511", 10);
    			this.fillCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ff8800");
    		}
    	}
    	this.drawLine(touchPoint, "red", 8); 
    };
    
    Gesture.prototype.selectPoint = function(touchPoint) {
    	var touchX = touchPoint.pageX - this.marginX;
    	var touchY = touchPoint.pageY - this.marginY;
    	for (var i = 0; i < this.ninePoints.length; i++) {
    		if (this.selectPoints.indexOf(i) == -1) { 
    			var point = this.ninePoints[i];
    			var diffX = Math.abs(point.x - touchX);
    			var diffY = Math.abs(point.y - touchY);
    			var distance = Math.sqrt(diffX * diffX + diffY * diffY);
    			if (distance < this.r) {
    				this.selectPoints.push(i);
    				this.strokeCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ff5511", 10);
    				this.fillCircle(this.ninePoints[i].x, this.ninePoints[i].y, this.r, "#ff8800");
    				break;				
    			}
    		}
    	}
    };
    
    Gesture.prototype.eventHandler = function() {
    	var that = this;
    	this.canvas.addEventListener("touchstart", function(event) {
    		that.selectPoint(event.touches[0]);
    	}, false);
    	this.canvas.addEventListener("touchmove", function(event) {
    		event.preventDefault();
    		that.selectPoint(event.touches[0]);
    		that.draw({x: event.touches[0].pageX - that.marginX, y: event.touches[0].pageY - that.marginY});
    	}, false);
    	this.canvas.addEventListener("touchend", function() {
    		that.storage();
    		that.selectPoints = [];
    		setTimeout(function() {
    			that.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    			for (var i = 0; i < that.ninePoints.length; i++) {
    				that.strokeCircle(that.ninePoints[i].x, that.ninePoints[i].y, that.r, "#cccccc", 10);
    				that.fillCircle(that.ninePoints[i].x, that.ninePoints[i].y, that.r, "#ffffff");
    			}
    		}, 500);
    	}, false);
    	var radios = document.getElementsByName("password");
    	for (var i = 0; i < radios.length; i++) {
    		radios[i].addEventListener("change", function() {
    			if (this.value == "setPassword") { 
    				that.radio = 0; 
    				that.state = 0;
    			}
    			else { 
    				if (JSON.parse(window.localStorage.getItem('password')) != null) { 
    					that.radio = 1;
    					that.state = 2;
    				}
    				else { 
    					alert("请先设置密码");
    					radios[0].checked = "checked";
    					that.state = 0;
    				}
    			}
    			document.getElementsByTagName('section')[0].innerHTML = '请输入手势密码';
    		}, false);
    	}
    };
    
    Gesture.prototype.storage = function() {
    	var section = document.getElementsByTagName('section')[0];
    	var radios = document.getElementsByName("password");
    	switch(this.state) {
    		case 0: 
    			if (this.radio == 0 && this.selectPoints.length < 5) 
    				section.innerHTML = '密码太短，至少需要5个点';
    			else {
    				section.innerHTML = '请再次输入手势密码';
    				this.password = this.selectPoints.slice(0);
    				this.state = 1;
    			}
    			break;
    		case 1:
    			if (!this.check(this.password, this.selectPoints)) {
    				section.innerHTML = '两次输入的不一致';
    				delete this.password;
    				this.state = 0;
    			}
    			else {
    				section.innerHTML = '密码设置成功';
    				window.localStorage.setItem('password', JSON.stringify(this.password));
    				radios[1].checked = "checked";
    				this.state = 2;
    			}
    			break;
    		case 2: 
    			if (!this.check(JSON.parse(window.localStorage.getItem('password')), this.selectPoints)) 
    				section.innerHTML = '输入的密码不正确';
    			else 
    				section.innerHTML = '密码正确！';
    			break;
    	}
    }
    
    Gesture.prototype.check = function(prePassword, curPassword) {
    	var preLen = prePassword.length;
    	var curLen =curPassword.length;
    	if (preLen != curLen) 
    		return false;
    	for (var i = 0; i < preLen; i++) {
    		if (prePassword[i] != curPassword[i])
    			return false;
    	}
    	return true;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈密码学？

密码学主要研究信息的安全传输和安全存储，集中于密码算法的选择使用、密码学协议的设计以及密钥生命周期的管理（包括产生、传输、存储、使用、销毁等）等方面。密码学的加密方式基于数学理

àì夳堔傛蜴生んèń/ 2024年03月25日 15:50/ 0 赞/ 106 阅读

相关浅谈移动端开发技术

浅谈移动端开发技术前言之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。在现在的公司也做了一些零散的 H

我就是我/ 2023年01月06日 15:58/ 0 赞/ 317 阅读

相关浅谈手势导航

文章目录前言一、全面屏 1.什么是全面屏 2.实现全面屏请求全屏布局改变系统栏颜色

快来打我*/ 2023年01月02日 08:30/ 0 赞/ 190 阅读

相关浅谈HTML5 canvas（二）

[http://blog.csdn.net/zhouziyu2011/article/details/65682406][http_blog.csdn.net_zhouziyu

╰+攻爆jí腚メ/ 2022年10月01日 04:47/ 0 赞/ 291 阅读

相关浅谈HTML5 canvas（一）

HTML5添加的最受欢迎的功能就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态在这个区域绘制图形。主流浏览器都支持canv

小咪咪/ 2022年07月05日 15:08/ 0 赞/ 239 阅读

相关浅谈移动设备手势密码组件的canvas实现

function Gesture(width, height) { this.width = width; this.height =

秒速五厘米/ 2022年06月18日 10:28/ 0 赞/ 211 阅读

相关浅谈Canvas与SVG

1、SVG SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文

深碍√TFBOYSˉ_/ 2022年06月18日 09:56/ 0 赞/ 269 阅读

相关浅谈HTML5 canvas实现移动端刮奖效果

1、刮奖图片通过设置div的背景图片实现，设置一个完全罩住刮奖图片的canvas，在canvas中绘制了一块等大的浅灰色矩形，使其盖住下方的刮奖图片。 2、为使得手指划过画布

谁借莪１个温暖的怀抱￠/ 2022年06月18日 02:36/ 0 赞/ 349 阅读

相关浅谈Canvas的状态绘图

Canvas是基于状态的绘图。 beginPath核心的作用是：将不同的绘制形态进行隔离，每次执行此方法，表示重新绘制一个路径，与之前绘制的路径可以分开进行样式设置和管理，如

骑猪看日落/ 2022年06月16日 10:11/ 0 赞/ 270 阅读

相关浅谈Qt手势扩展

在目前的[嵌入式][Link 1]领域，Qt 被普遍应用于GUI的设计中。手势识别做为移动设备必不可少的技术，Qt对手势也提供了一些支持。 Qt主要为用户提供了以下几种手

小咪咪/ 2022年06月09日 08:15/ 0 赞/ 471 阅读