使用canvas，js绘制带干扰线的验证码

html部分

react中的写法

//页面加载时生成验证码
componentDidMount(){
    codeCanvas(this.refs.codeShow);
}
//点击验证码会更换新验证码
changeCode(){
    codeCanvas(this.refs.codeShow);
}
//render中
<canvas  ref="codeShow" width='80' height='36' title="看不清，点我换一张" onClick={() => this.changeCode()}></canvas>

html中的写法

//js中
window.onload = function(){
    codeCanvas(document.getElementById("codeShow"));
}
//HTML代码
<canvas id="codeShow" width='80' height='36' title="看不清，点我换一张" onclick="..."></canvas>

js部分

//提供全局变量表示当前的验证码，便于验证
var code;
//生成验证码字符
function createCode(){
    code = "";
    var random = new Array(0,1,2,3,4,5,6,7,8,9, 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
    //验证码长度为4位
    var codeLength = 4;
    for(let i = 0;i < codeLength;i++){
        //验证码的字符在array中的下标在0-36之间
        var index = Math.floor(Math.random()*36);
        code += random[index];
    }
    return code;
}

//干扰线的随机x坐标值
function lineX(){
    //坐标值在width之内
    var ranLineX = Math.floor(Math.random()*80);
    return ranLineX;
}
//干扰线的随机y坐标值
function lineY(){
    //坐标值在height之内
    var ranLineY=Math.floor(Math.random()*36);
    return ranLineY;
}
//传入的参数表示canvas节点
//传入参数主要是在react中方便使用，若为原生HTML，可在此方法内通过getElementById的方法直接获取节点
function codeCanvas(codeShow){
    var cxt=codeShow.getContext('2d');
    //背景颜色
    cxt.fillStyle='#8dd5e7';
    //矩形左上角x,y坐标以及矩形宽高
    cxt.fillRect(0,0,80,36);
    //生成干扰线20条
    for(var j=0;j<20;j++){
        //线条的颜色
        cxt.strokeStyle='#666';
        //若省略beginPath，则每点击一次验证码会累积干扰线的条数
        cxt.beginPath(); 
        cxt.moveTo(lineX(),lineY());
        cxt.lineTo(lineX(),lineY());
        cxt.lineWidth=0.5;
        cxt.closePath();
        cxt.stroke();
    }
    //不设置的话里面的文本颜色就是和上面设置的背景色相同
    cxt.fillStyle='#fff';
    cxt.font='bold 20px Arial';
    //把生成的随机数文本填充到canvas中
    cxt.fillText(createCode(),16,24); 
}