Html5生成验证码的示例代码
程序员文章站
2022-06-18 18:45:18
Html5生成验证码的示例代码这篇文章主要介绍了Html5生成验证码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 21-05-10...
利用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()方法
document.getelementbyid("canvas").onclick = function(e){
e.preventdefault();
drawpic();
};
function drawpic(){
//获取到元素canvas
var $canvas = document.getelementbyid("canvas");
var _str = "0123456789";//设置随机数库
var _pictxt = "";//随机数
var _num = 4;//4个随机数字
var _width = $canvas.width;
var _height = $canvas.height;
var ctx = $canvas.getcontext("2d");//获取 context 对象
ctx.textbaseline = "bottom";//文字上下对齐方式--底部对齐
ctx.fillstyle = randomcolor(180,240);//填充画布颜色
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.translate(x,y);//将当前xy坐标作为原始坐标
ctx.rotate(deg*math.pi/180);//旋转随机角度
ctx.filltext(txt, 0,0);//绘制填色的文本
ctx.rotate(-deg*math.pi/180);
ctx.translate(-x,-y);
}
for(var i=0; i<_num; i++){
//定义笔触颜色
ctx.strokestyle = randomcolor(90,180);
ctx.beginpath();
//随机划线--4条路径
ctx.moveto(randomnum(0,_width), randomnum(0,_height));
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生成验证码内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！