html验证码怎么生成,html实现验证码

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

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

　　代码块

　　！DOCTYPE html html head meta charset= UTF-8 标题验证码/title style type= text/CSS # canvas { cursor:pointer；}/style/head body画布id= canvas width= 150 px height= 50px /canvas script//生成随机数函数randomNum(min，max){ return math。地板(数学。random()*(max-min)min)；} //生成随机颜色RGB分量函数randomColor(min，max){ var _r=randomNum(min，max)；var _g=randomNum(min，max)；var _b=randomNum(min，max)；返回" rgb( _r ， _g ， _ b )"；} //先阻止画布默认点击发生的行为再执行drawPic()方法文档。getelementbyid(“canvas”).onclick=function(e){ e .防止默认()；画pic()；};函数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。获取上下文(“2d”)；//获取语境对象ctx.textBaseline= bottom//文字上下对齐方式-底部对齐ctx.fillStyle=randomColor(180，240)；//填充画布颜色ctx.fillRect(0，0，_width，_ height)；//填充矩形-画画for(var I=0；I _ numI){ var x=(_ width-10)/_ num * I 10；var y=randomNum(_height/2，_ height)；var deg=randomNum(-45，45)；var txt=_str[randomNum(0，_str。长度)]；_ picTxt=txt//获取一个随机数ctx.fillStyle=randomColor(10，100)；//填充随机颜色ctx.font=randomNum(16，40) px sim hei ；//设置随机数大小，字体为SimHei ctx.translate(x，y)；//将当前正常男性染色体组型坐标作为原始坐标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 _ numi ){ //定义笔触颜色ctx.strokeStyle=randomColor(90，180)；CTX。begin path()；//随机划线- 4条路径ctx.moveTo(randomNum(0，_width)，randomNum(0，_ height))；ctx.lineTo(randomNum(0，_width)，randomNum(0，_ height))；CTX。笔画()；} for(var I=0；I _ num * 10i){ CTX . fill style=random color(0，255)；CTX。begin path()；//随机画原，填充颜色ctx.arc(randomNum(0，_width)，randomNum(0，_height)，1，0，2*Math .PI)；CTX。fill()；} return _ picTxt//返回随机数字符串} drawPic()；/script/body/html到此这篇关于Html5生成验证码的示例代码的文章就介绍到这了，更多相关Html5生成验证码内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。