canvas + js做(常见的登录验证码) + 详解
html结构很简单搭建看一下代码就懂了。
其中验证码部分采用HTML 5中新增的canvas元素来实现。
用canvas元素绘制必须与js结合一起使用。
提交表单的时候有一些简单的绑定事件。
js部分有非常详细的注释。
html部分
<div class="wrapper">
<div class="input-box">
<input type="text" class="inp" id="_inp">
<span class="icon" id="_icon"></span>
</div>
<p id="massege">请输入。。。</p>
<div class="canvas-box">
<canvas id="canvas" width="270" height="80"></canvas>
<input type="button" class="refresh" id="_refresh">
</div>
<button class="sub" id="_sub">submit</button>
</div>
css部分
<style>
*{
padding:0;
margin:0;
border:none;
outline: none;
}
.wrapper{
width: 350px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 15px;
padding: 20px;
box-sizing: border-box;
}
.wrapper .input-box,
.wrapper .canvas-box
{
position: relative;
}
.wrapper .input-box .inp{
margin: 10px 0;
border: 1px solid #ccc;
width: 270px;
padding:15px;
box-sizing: border-box;
border-radius: 5px;
}
.wrapper .input-box .icon{
position: absolute;
width:32px;
height: 32px;
background-size: 100% 100%;
top: 50%;
right: 0;
margin-top: -16px;
display: none;
}
.wrapper p{
margin-top: 10px;
font-size: 12px;
color: red;
padding-left: 10px;
display: none;
}
.wrapper .canvas-box canvas{
margin: 15px 0;
background: url('images/bg.jpg');
border-radius: 5px;
}
.wrapper .canvas-box .refresh{
width: 32px;
height: 32px;
position: absolute;
top:50%;
margin-top: -16px;
right: 0;
background: url('images/update.png');
background-size: cover;
cursor: pointer;
}
.wrapper .sub{
width: 80px;
height: 35px;
background-color: #62b900;
border-radius: 5px;
color: #fff;
font-size: 18px;
cursor: pointer;
}
</style>
js部分
<script>
// 定义一个存放数字与字母的数组
var array = [0,1,2,3,4,5,6,7,8,9];
var string ;// 画布里面的文字
init();
function init(){
for(var i = 65; i < 122; i++)
{
if(i > 90 && i < 97)
{
continue;
}
else {
// 将数字转为字母
array.push( String.fromCharCode(i));
}
}
console.log(array);
// 创建画布
createCanvas();
// 事件的绑定
bindEvent();
}
function createCanvas(){
string = '';// 画布里的文字
var len = array.length;
for(var i = 0;i < 6; i++)
{
var text = array[Math.floor(Math.random()*len)];
string += text + '';
}
//获得canvas区域
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');// 产生一个上下文对象(画笔),二维绘图
context.beginPath();//调用beginPath()方法表示路径的开始
context.clearRect(0,0,canvas.width,canvas.height);// 绘制前先清除
context.moveTo(10 + Math.floor(Math.random()*30),Math.floor(Math.random()*80));// 将光标移动到新点(x,y),作为起始点,但不绘制
context.lineTo(Math.floor(250 + Math.random()*20),Math.floor(Math.random()*80));// 指定到目标坐标(x,y),且在两坐标之间画一条直线
context.lineWidth = 15;//指定线条的宽度
context.strokeStyle = "#ccc";// 指定线条的颜色
context.stroke();// 使用lineWidth、lineCap、lineJoin、strokeStyle对所有子路径进行填充
context.closePath();// 关闭路径
context.save();// 保存当前绘制的状态
// 将文字加入到canvas中
context.beginPath();// 开始新的路径
context.font = '46px Roboto Slab';// 设置文本字体
context.fillStyle = '#ddd';//
context.textAlign = 'center';// 设置文字对齐方式
var x = canvas.width / 2;// x表示绘制文字的起始位置
context.setTransform(1,-0.1,0.2,1,0,12);// 设置文字旋转和倾斜的效果
context.fillText(string,x,60 );// 绘制填充文字
context.restore();
}
function bindEvent(){
var sub = document.getElementById('_sub'); // 获取提交按钮
var ipt = document.getElementById('_inp');
var massege = document.getElementById('massege');
var icon = document.getElementById('_icon');
var refresh = document.getElementById('_refresh');
sub.addEventListener('click',function(){
if(ipt.value == '' || ipt.value == null || ipt.value == undefined)
{
massege.style.display = 'block';
icon.style.display = "block";
massege.innerHTML = "请输入内容";
icon.style.backgroundImage = "url('images/false.png')";
}
else
{
if(ipt.value == string.toLocaleLowerCase())// 小写也可以
{
icon.style.display = "block";
icon.style.backgroundImage = "url('images/true.png')";
}
else
{
massege.style.display = 'block';
icon.style.display = "block";
icon.style.backgroundImage = "url('images/false.png')";
massege.innerHTML = '输入错误,请重新输入!';
}
}
});
refresh.addEventListener('click',function(){
createCanvas();// 更新画布(更新文字)
});
// input文本框获得焦点之后 提示信息自动清除
ipt.addEventListener('focus',function(){
massege.style.display = 'none';
icon.style.display = "none";
});
}
</script>