1.html
canvas画布：
元素用于图形的绘制，canvas 元素本身是没有绘图能力的,通过脚本 (通常是JavaScript)来完成.
标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
<div class="wrapper">
<!--输入框-->
<div class="inputBox">
<input type="text" placeholder="请输入验证码" />
<span></span>
</div>
<!--错误图书-->
<p class="error">错误</p>
<!--画图-->
<div class="canvasbox">
<div class="imgbox">
<canvas id="main" width="300" height="80"></canvas>
</div>
<!--刷新-->
<input type="button" class="refresh" />
</div>
<!--提交-->
<button class="submit">提交</button>
</div>
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div class="wrapper">
<!--输入框-->
<div class="inputBox">
<input type="text" placeholder="请输入验证码" />
<span></span>
</div>
<!--错误图书-->
<p class="error">错误</p>
<!--画图-->
<div class="canvasbox">
<div class="imgbox">
<canvas id="main" width="300" height="80"></canvas>
<!--元素用于图形的绘制，canvas 元素本身是没有绘图能力的,通过脚本 (通常是JavaScript)来完成.
标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.-->
</div>
<!--刷新-->
<input type="button" class="refresh" />
</div>
<!--提交-->
<button class="submit">提交</button>
</div>
<script src="jquery-1.11.0.js"></script>
<script src="demo.js"></script>
</body>
</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();
})
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
