WEB机试题--使用canvas绘制验证码

input,canvas,button{
    vertical-align: bottom;
}

<input type="text" id="codeinp">
<canvas  title="点我刷新验证码" width="120" height="40" style="border: 1px solid #000;">
    对不起,您的浏览器不支持canvas
</canvas>
<button>验证</button>

var mycanvas=document.getElementsByTagName("canvas")[0];
var ctx=mycanvas.getContext("2d");
//干扰点的数量
var pointNum=80;
//干扰线的数量
var lineNum=7;
//随机字符的文本
var str="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRXTUVWXYZ";
//用来存储每次生成验证码的字符串
var codeStr="";
mycanvas.onclick=function () {
    //每次点击刷新验证码
    codeStr= ranCode();
    // console.log("本次验证码是:"+codeStr);
};
//页面加载时要调用一次 画验证码
codeStr=ranCode();
var codeinp=document.getElementById("codeinp");
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
    if(codeinp.value=="" || codeinp.value.toLowerCase()!=codeStr.toLowerCase()){
        alert("验证码错误!");

        //验证码一定要忽略大小写判断
    }else if(codeinp.value.toLowerCase()==codeStr.toLowerCase()){
        alert("验证码通过!")
    }
    //    无论错误还正确 都要把验证码 刷新一下
    codeStr=ranCode();
};
function ranCode() {
    //每次画之前要清除
    ctx.clearRect(0,0,120,40);
    //每次刷新验证码时 都要重新创建一个字符串变量用来存储验证码
    var text="";
    /*随机画字符的循环*/
    for(var i=0;i<4;i++){
        ctx.beginPath();
        ctx.textBaseline="top";
        ctx.font="20px 宋体";
        ctx.fillStyle=getRanColor(0,100);
        var ranS=str.charAt(getRanNumber(0,str.length-1));
        //把每次循环出来的随机字符拼接上去
        text+=ranS;
        //改进后的代码----------------------↓
        //旋转和位移之前   把状态保存
        ctx.save();
        //改进后的代码----------------------↑
        ctx.translate(i*30,0);
        var ranAngle=Math.PI/180*getRanNumber(-20,20)
        ctx.rotate(ranAngle);
        ctx.fillText(ranS,getRanNumber(10,20),getRanNumber(0,20));
        //改进后的代码----------------------↓
        //画完文字后 把状态读取回来
        ctx.restore();
        //改进后的代码----------------------↑
    }
    /*画随机点的循环*/
    for(var i=0;i<pointNum;i++){
        ctx.beginPath();

        ctx.fillStyle=getRanColor(180,240);
        ctx.arc(getRanNumber(0,120),getRanNumber(0,40),1,0,Math.PI*2);
        ctx.fill();
    }
    /*画干扰线的循环*/
    for(var i=0;i<lineNum;i++){
        ctx.beginPath();
        ctx.strokeStyle=getRanColor(180,240);
        ctx.moveTo(getRanNumber(0,20),getRanNumber(0,40));
        ctx.lineTo(getRanNumber(100,120),getRanNumber(0,40));
        ctx.stroke();
    }
    //把每次随机产生的验证码返回
    return text;
}

//    获取一个随机数的方法(min到max随机 包含max)
function getRanNumber(min,max) {
    return parseInt(Math.random()*(max-min+1)+min);
}
//    获取随机颜色的方法
function getRanColor(min,max) {
    if(min<0 || min>255){
        min=0;
    }
    if(max<0 || max>255){
        max=255;
    }
    var r=getRanNumber(min,max);
    var g=getRanNumber(min,max);
    var b=getRanNumber(min,max);
    return "rgb("+r+","+g+","+b+")";
}