H5 canvas-验证码
H5 canvas写的验证码插件,需引入jquery,可刷新,上图
HTML
<!DOCTYPE html>
<html>
<head>
<title>VT Code</title>
<link rel="stylesheet" type="text/css" href="VT Code.css">
</head>
<body>
<div class="wrapper">
<div class="inputBox">
<input type="text" name="" placeholder="请输入验证码">
<span></span>
</div>
<p class="error"></p>
<div class="canvasBox">
<div class="imgBox">
<canvas id="myCanvas" width=300 height=80></canvas>
</div>
<input type="button" class="refresh"></input>
</div>
<button class="submit">submit</button>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="VTCode.js"></script>
</body>
</html>
CS
*{
margin: 0;
padding: 0;
}
.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不改变总体大小*/
}
.inputBox span{
position: absolute;
right: 0;
/* display: inline-block; */
width: 30px;
height: 23.5px;
background: url('./img/true.png');
background-size: 100%;
display: none;
top: 50%;
margin-top: -11.75px;
}
.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: 0px;
top: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url('./img/refersh.png');
background-size: 100%;
margin-top: -15px;
border: 0;
outline: none; /*去边框蓝光*/
cursor: pointer; /*小手*/
}
.submit{
padding: 10px 20px;
border: 0;
background-color: greenyellow;
color: #fff;
font-size: 18px;
margin-top: 15px;
border-radius: 5px;
cursor: pointer; /*小手*/
}
JS
//生成字符串库,0~9,a~Z
var arr=[];
for(var i=48;i<123;i++){
if((i>57&&i<65)||(i>90&&i<97)){
continue;
}
arr.push(String.fromCharCode(i));
}
var value;
//实例化,画布对象
function createCanvas(){
value='';
//选取验证码
var canvasStr="";
for(var i=0;i<6;i++){
canvasStr+=arr[Math.floor(Math.random()*arr.length)]+" ";
}
//生成验证码图片
var myCanvas=document.getElementById('myCanvas'); //画布
var ctx=myCanvas.getContext('2d'); //画笔
var oImg=new Image();
oImg.src='./img/bj.png';
oImg.onload = function(){ //oImg(验证码图片)加载完执行
var pattern=ctx.createPattern(oImg,'repeat');
ctx.fillStyle=pattern; //填充范围,父级myCanvas
ctx.fillRect(0,0,myCanvas.width,myCanvas.height); //填充起始坐标x,y 结束坐标x,y
ctx.textAlign = 'center'; //文本中心对齐
ctx.fillStyle='#ccc';
ctx.font ='46px Roboto Slab';
ctx.setTransform(1,-0.12,0.3,1,0,12); //设置倾斜,缩放....
ctx.fillText(canvasStr,myCanvas.width/2,60); //填充验证码,开始位置
}
value=canvasStr;
}
createCanvas();
$('.submit').on('click',function(){
showResult();
})
$('.refresh').on('click',function(){
createCanvas(); //刷新验证码
})
function showResult(){
var inputValue=$('.inputBox input').val();
console.log(value.toLowerCase().replace(/\s+/g,"")+" "+inputValue.replace(/\s+/g,"").toLowerCase())
if(value.toLowerCase().replace(/\s+/g,"")==inputValue.replace(/\s+/g,"").toLowerCase()){
// $('.inputBox span').css({
// background:"url('./img/true.png')",
// display :'inline-block'
// })
$('.error').css(display,'inline-block').html('验证码输入正确!');
createCanvas(); //刷新验证码
}else{
// $('.inputBox span').css({
// background:'url("./img/false.png")',
// display:'inline-block'
// });
$('.error').css(display,'inline-block').html('验证码输入错误,请重新输入!');
createCanvas(); //刷新验证码
}
}