手势密码,canvas实现手机的手势解锁的步骤详细"/>
html中如何制作手势密码,canvas实现手机的手势解锁的步骤详细
本文介绍了canvas手机的手势解锁,分享给大家,顺便给自己留个笔记,废话不多说,具体如下:
按照国际惯例,先放效果图
1、js动态初始化Dom结构
首先在index.html中添加基本样式
body{background:pink;text-align: center;}
加个移动端meta头
引入index.js脚本
index.js
// 匿名函数自执行
(function(){
// canvasLock是全局对象
window.canvasLock=function(obj){
this.width=obj.width;
this.height=obj.height;
}
//动态生成DOM
canvasLock.prototype.initDom=function(){
//创建一个div
var div=document.createElement("div");
var h4="
绘制解锁图案
";div.innerHTML=h4;
div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");
//创建canvas
var canvas=document.createElement("canvas");
canvas.setAttribute("id","canvas");
//cssText 的本质就是设置 HTML 元素的 style 属性值
canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;";
div.appendChild(canvas);
document.body.appendChild(div);
//设置canvas默认宽高
var width=this.width||300;
var height=this.height||300;
canvas.style.width=width+"px";
canvas.style.height=height+"px";
canvas.width=width;
canvas.height=height;
}
//init代表初始化,程序的入口
canvasLock.prototype.init=function(){
//动态生成DOM
this.initDom();
//创建画布
this.canvas=document.getElementById("canvas");
this.ctx=this.canvas.getContext("2d");
}
})();
在index.html中创建实例并初始化
new canvasLock({}).init();
效果图
2、 画圆函数
需要补充一下画布宽度与圆的半径的关系
如果一行3个圆,则有4个间距,间距的宽度与圆的直径相同,相当于7个直径,即14个半径
如果一行4个圆,则有5个间距,间距的宽度与圆的直径相同,相当于9个直径,即18个半径
如果一行n个圆,则有n+1个间距,间距的宽度与圆的直径相同,相当于2n+1个直径,即4n+2个半径
补充两个方法:
//以给定坐标点为圆心画出单个圆
canvasLock.prototype.drawCircle=function(x,y){
this.ctx.strokeStyle="#abcdef";
this.ctx.lineWidth=2;
this.ctx.beginPath();
this.ctx.arc(x,y,this.r,0,2*Math.PI,true);
this.ctx.closePath();
this.ctx.stroke();
}
//绘制出所有的圆
canvasLock.prototype.createCircle=function(){
var n=this.circleNum;//一行几个圆
var count=0;
this.r=this.canvas.width/(4*n+2);//公式计算出每个圆的半径
this.lastPo
更多推荐
html中如何制作手势密码,canvas实现手机的手势解锁的步骤详细
发布评论