这篇文章主要介绍了如何通过Html5生成验证码的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何通过Html5生成验证码文章都会有所收获，下面我们一起来看看吧。

利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码，背景为随机生成的颜色和杂乱的直线与点点。

进阶：利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。

代码块：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>验证码</title><styletype="text/css">#canvas{cursor:pointer;}</style></head><body><canvasid="canvas"width="150px"height="50px"></canvas><script>//生成随机数functionrandomNum(min,max){returnMath.floor(Math.random()*(max-min)+min);}//生成随机颜色RGB分量functionrandomColor(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();};functiondrawPic(){//获取到元素canvasvar$canvas=document.getElementById("canvas");var_str="0123456789";//设置随机数库var_picTxt="";//随机数var_num=4;//4个随机数字var_width=$canvas.width;var_height=$canvas.height;varctx=$canvas.getContext("2d");//获取context对象ctx.textBaseline="bottom";//文字上下对齐方式--底部对齐ctx.fillStyle=randomColor(180,240);//填充画布颜色ctx.fillRect(0,0,_width,_height);//填充矩形--画画for(vari=0;i<_num;i++){varx=(_width-10)/_num*i+10;vary=randomNum(_height/2,_height);vardeg=randomNum(-45,45);vartxt=_str[randomNum(0,_str.length)];_picTxt+=txt;//获取一个随机数ctx.fillStyle=randomColor(10,100);//填充随机颜色ctx.font=randomNum(16,40)+"pxSimHei";//设置随机数大小，字体为SimHeictx.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(vari=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(vari=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生成验证码”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。