js 生成图像验证码

/**生成一个随机数**/
function randomNum(min,max){
    return Math.floor( Math.random()*(max-min)+min);
}
/**生成一个随机色**/
function randomColor(min,max){
    let r = randomNum(min,max);
    let g = randomNum(min,max);
    let b = randomNum(min,max);
    return "rgb("+r+","+g+","+b+")";
}
let yzm = ''; //获取产生的验证码
/**绘制验证码图片**/
function drawPic(){
    yzm = ''; //清空
    let canvas=document.getElementById("canvas");  //获取要绘画的标签
    let width=canvas.width;
    let height=canvas.height;
    let ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';

    /**绘制背景色**/
    ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
    ctx.fillRect(0,0,width,height);
    /**绘制文字**/
    let str = 'ABCEFGHJKLMNPQRSTWXY123456789';
    for(let i=0; i<4; i++){
        let txt = str[randomNum(0,str.length)];
        yzm += txt;  //累加随机生成的验证码
        ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
        ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
        let x = 10+i*25;
        let y = randomNum(25,45);
        let deg = randomNum(-45, 45);
        //修改坐标原点和旋转角度
        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(let i=0; i<8; i++){
        ctx.strokeStyle = randomColor(40,180);
        ctx.beginPath();
        ctx.moveTo( randomNum(0,width), randomNum(0,height));
        ctx.lineTo( randomNum(0,width), randomNum(0,height));
        ctx.stroke();
    }
    /**绘制干扰点**/
    for(let i=0; i<100; i++){
        ctx.fillStyle = randomColor(0,255);
        ctx.beginPath();
        ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
        ctx.fill();
    }
}
/*
<canvas> 元素用于图形的绘制
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
*/
$('#canvas').on('click',function(){
    drawPic();
    console.log(yzm);
})

<a href="#a">
    <canvas id="canvas" width="120" height="40" style="background-image: url(img/001.png);"></canvas></a>