这篇文章将为大家详细讲解有关如何使用canvas及js生成验证码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题，与客户深入沟通，找到布尔津网站设计与布尔津网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、网页空间、企业邮箱。业务覆盖布尔津地区。
在很多时候都需要用到验证码，前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是：
1.生成一张画布canvas
2.生成随机数验证码
3.在画布中生成干扰线
4.把验证码文本填充到画布中
5.点击画布更换验证码
结构与样式：
您的浏览器不支持canvas，请换个浏览器试试~
下面来编写js代码：
/*生成4位随机数*/
function rand(){
var str="abcdefghijklmnopqrstuvwxyz0123456789";
var arr=str.split("");
var validate="";
var ranNum;
for(var i=0;i<4;i++){
ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
validate+=arr[ranNum];
}
return validate;
}
/*干扰线的随机x坐标值*/
function lineX(){
var ranLineX=Math.floor(Math.random()*90);
return ranLineX;
}
/*干扰线的随机y坐标值*/
function lineY(){
var ranLineY=Math.floor(Math.random()*40);
return ranLineY;
}
function clickChange(){
var mycanvas=document.getElementById('mycanvas');
var cxt=mycanvas.getContext('2d');
cxt.fillStyle='#000';
cxt.fillRect(0,0,90,40);
/*生成干扰线20条*/
for(var j=0;j<20;j++){
cxt.strokeStyle='#fff';
cxt.beginPath(); //若省略beginPath，则每点击一次验证码会累积干扰线的条数
cxt.moveTo(lineX(),lineY());
cxt.lineTo(lineX(),lineY());
cxt.lineWidth=0.5;
cxt.closePath();
cxt.stroke();
}
cxt.fillStyle='red';
cxt.font='bold 20px Arial';
cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中
}
clickChange();
/*点击验证码更换*/
mycanvas.onclick=function(e){
e.preventDefault(); //阻止鼠标点击发生默认的行为
clickChange();
};关于“如何使用canvas及js生成验证码”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网页题目：如何使用canvas及js生成验证码
转载来于：
http://bjjierui.cn/article/ighphj.html
