前端js——验证码登录（canvas画布），随机生成验证码，判断正确性

1.html

canvas画布：
元素用于图形的绘制，canvas 元素本身是没有绘图能力的,通过脚本 (通常是JavaScript)来完成.
标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

			
			

				
				
			
			
			
错误
			
			

				

					
				
				
				
			
			
			提交
		

2.js

1.验证码组成——大小写英文字母,数字共六位
数字：

var show=[1,2,3,4,5,6,7,8,9];

字母：

for(var i=65;i<122;i++){
	if(i>90&&i<97){
		continue;
	}
	show.push(String.fromCharCode(i));
//	将数字转换为字母

}

2.随机生成字符串
valueNum用于验证
canvasNum用于展示
随机：Math.random()

  for(var i=0;i<6;i++){
  	var j=show[Math.floor(Math.random()*show.length)];
//	数组名[取整（随机参与抽取的字符个数)]  范围0.0-show.length
  	canvasNum+=j+' ';
//	依次将随机字符添加进字符串
//  console.log(canvasNum);
    valueNum+=j;
  }

3.为canvas画布添加内容
得到canvas画布，设置图片背景

//取得上下文对象作为canvas画笔
   var showCanvas=document.getElementById('main');
// 指定二维绘图
   var ctx=showCanvas.getContext('2d');
//定义图片背景
   var img=new Image();
   img.src='img_1.jpg';

为内容设置样式

   img.onload=function(){
// 	图片加载完进行填充
    var pattern=ctx.createPattern(img,'repeat');
//  指定的方向内重复指定的元素,元素可以是图片、视频，或者其他,默认repeat
//  ctx.setTransform(1,-0.12,0.3,1,0,12);
    ctx.fillStyle=pattern;
//  设置canvas填充内容
    ctx.fillRect(0,0,showCanvas.width,showCanvas.height);
//  设置起始点,终点
    ctx.fillStyle='white';
    ctx.font='40px Roboto Slab';
    ctx.textAlig='center';
//  水平旋转,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动
    ctx.fillText(canvasNum,showCanvas.width/6,60);
//  显示内容,宽度,高度
   }

4.提交事件，提交后刷新验证码，显示对应的提示文字及图标

判断语句:valueNum==inputText
jq语句控制css样式： $(’.inputBox span’).css({ })

function showResult(){
	var inputText=$('.inputBox input').val();
//	输入框的值
    if(valueNum==inputText){
    	$('.inputBox span').css({
    		display:'inline-block',
    		"background-image":"url(right.png)"
    	})
    	$('.error').css({display:'block'}).html('正确');
    	createCanvas();
    }else{
    	$('.inputBox span').css({
    		display:'inline-block',
    		"background-image":"url(close.png)"
    	});
    	$('.error').css({display:'block'}).html('验证码错误，重新输入');
    	createCanvas();
    }

3.完整代码：

html

	
		
		
		
	
	
		

			
			

				
				
			
			
			
错误
			
			

				

					
					
				
				
				
			
			
			提交
		
		
		
	

css

*{
	padding: 0;
	/*ul li*/
	margin: 0;
	/*body*/
}
.wrapper{
	margin: 30px;
	width: 345px;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius:5px ;
}

/*输入框*/
.inputBox{
	position: relative;
}
.inputBox input{
	display: inline-block;
	width: 300px;
	outline: none;
	padding: 15px;
	border-radius: 5px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	/*有padding但是不把整个展示区域撑开    将标准盒模型变成IE盒模型*/
}
/*按钮*/
.inputBox span{
	position: absolute;
	/*display: inline-block;*/
	width: 20px;
	height: 20px;
	background-size:100% ;
	top: 12px;
	display: none;
}
/*错误提示*/
.error{
	color: red;
	margin-top: 10px;
	font-size: 12px;
	display: none;
}
/*图片框*/
.canvasbox{
	position: relative;
	margin-top:15px ;
	/*border: 1px solid #000;*/
}
/*画布*/
.canvasbox .imgbox{
	width: 300px;
	height: 80px;
	border: 1px solid #ccc;
	border-radius:5px;
}
.canvasbox .refresh{
	position: absolute;
	right: 0;
	top: 30%;
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url('刷新.png');
	background-size: 100%;
}

/*提交按钮*/
.submit{
	padding: 5px 20px;
	/*上下 左右*/
	border: 0;
	background-color: greenyellow;
	color: #fff;
	font-size: 18px;
	margin-top: 15px;
	border-radius: 5px;
	cursor: pointer;
	/*把鼠标指针的形状弄成一只伸出食指的手*/
}

js

var show=[1,2,3,4,5,6,7,8,9];
for(var i=65;i<122;i++){
	if(i>90&&i<97){
		continue;
	}
	show.push(String.fromCharCode(i));
//	将数字转换为字母

}
var valueNum='';

function createCanvas(){

//选取要显示的字符
  var canvasNum='';
//显示的字符串
  for(var i=0;i<6;i++){
  	var j=show[Math.floor(Math.random()*show.length)];
//	数组名[取整（随机参与抽取的字符个数)]  范围0.0-show.length
  	canvasNum+=j+' ';
//	依次将随机字符添加进字符串
//  console.log(canvasNum);
    valueNum+=j;
  }
  
//	生成验证码
//取得上下文对象作为canvas画笔
   var showCanvas=document.getElementById('main');
// 指定二维绘图
   var ctx=showCanvas.getContext('2d');
//定义图片背景
   var img=new Image();
   img.src='img_1.jpg';
   
   img.onload=function(){
// 	图片加载完进行填充
    var pattern=ctx.createPattern(img,'repeat');
//  指定的方向内重复指定的元素,元素可以是图片、视频，或者其他,默认repeat
//  ctx.setTransform(1,-0.12,0.3,1,0,12);
    ctx.fillStyle=pattern;
//  设置canvas填充内容
    ctx.fillRect(0,0,showCanvas.width,showCanvas.height);
//  设置起始点,终点
    ctx.fillStyle='white';
    ctx.font='40px Roboto Slab';
    ctx.textAlig='center';
//  水平旋转,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动
    ctx.fillText(canvasNum,showCanvas.width/6,60);
//  显示内容,宽度,高度
   }
// console.log(canvasNum);
}

createCanvas();

function showResult(){
	var inputText=$('.inputBox input').val();
//	输入框的值
    if(valueNum==inputText){
    	$('.inputBox span').css({
    		display:'inline-block',
    		"background-image":"url(right.png)"
    	})
    	$('.error').css({display:'block'}).html('正确');
    	createCanvas();
    }else{
    	$('.inputBox span').css({
    		display:'inline-block',
    		"background-image":"url(close.png)"
    	});
    	$('.error').css({display:'block'}).html('验证码错误，重新输入');
    	createCanvas();
    }
}



//刷新按钮
$('.refresh').on('click',function(){
	createCanvas();
})

//提交事件
$('.submit').on('click',function(){
	showResult();
})