Html5⽣成验证码的⽰例代码
利⽤Html5的canvas标签⽣成画布，在画布上利⽤随机⽣成的数字画上验证码，背景为随机⽣成的颜⾊和杂乱的直线与点点。进阶：利⽤表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进⾏后台数据获取与检查。
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
<style type="text/css">
#canvas{
cursor:pointer;
}
</style>
</head>
<body>
<canvas id="canvas" width="150px" height="50px"></canvas>
<script>
//⽣成随机数
function randomNum(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
/
/⽣成随机颜⾊RGB分量
function randomColor(min,max){
var _r = randomNum(min,max);
var _g = randomNum(min,max);
var _b = randomNum(min,max);
return "rgb("+_r+","+_g+","+_b+")";
}
//先阻⽌画布默认点击发⽣的⾏为再执⾏drawPic()⽅法
e.preventDefault();
drawPic();
};
function drawPic(){
//获取到元素canvas
var $canvas = ElementById("canvas");
var _str = "0123456789";//设置随机数库
var _picTxt = "";//随机数
var _num = 4;//4个随机数字
var _width = $canvas.width;
var _height = $canvas.height;
var ctx = $Context("2d");//获取 context 对象
ctx.fillStyle = randomColor(180,240);//填充画布颜⾊
html5开发示例
ctx.fillRect(0,0,_width,_height);//填充矩形--画画
for(var i=0; i<_num; i++){
var x = (_width-10)/_num*i+10;
var y = randomNum(_height/2,_height);
var deg = randomNum(-45,45);
var txt = _str[randomNum(0,_str.length)];
_picTxt += txt;//获取⼀个随机数
ctx.fillStyle = randomColor(10,100);//填充随机颜⾊
ctx.font = randomNum(16,40)+"px SimHei";//设置随机数⼤⼩，字体为SimHei
ctx.fillText(txt, 0,0);//绘制填⾊的⽂本
}
for(var i=0; i<_num; i++){
//定义笔触颜⾊
ctx.strokeStyle = randomColor(90,180);
ctx.beginPath();
//随机划线--4条路径
ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
ctx.stroke();
}
for(var i=0; i<_num*10; i++){
ctx.fillStyle = randomColor(0,255);
ctx.beginPath();
//随机画原，填充颜⾊
ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
ctx.fill();
}
return _picTxt;//返回随机数字符串
}
drawPic();
</script>
</body>
</html>
到此这篇关于Html5⽣成验证码的⽰例代码的⽂章就介绍到这了，更多相关Html5⽣成验证码内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。