js实现canvas简单的验证码

首先，canvas：固定在浏览器上的画布，浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和方法。
canvas为我们敞开了新一扇大门。
属于HTML5中新增的一个标签，看起来与其他标签区别不大，在验证码之前，应该学习canvas相关API，
这里介绍本次用到的canvas方法：
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
fillRect() 绘制“被填充”的矩形
stroke() 绘制已定义的路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
arc() 创建弧/曲线（用于创建圆形或部分圆）
font 设置或返回文本内容的当前字体属性
更多请参考w3c文档w3c

html

css

canvas{

        cursor: pointer;
        /*border: 1px solid red;*/
    }

var canvas = document.querySelector(“#canvas”);

console.log(canvas);
var cxt = canvas.getContext('2d');//绘图上下文环境
//绘制验证码图片
draw();
canvas.onclick = function(){
    // console.log('1');
    draw();
};
function draw(){

// 绘制一个颜色随机的矩形

    cxt.beginPath();
    cxt.fillStyle = randColor(170,250);//把颜色放到一个方法
    cxt.fillRect(0,0,120,30);
    cxt.closePath();
    var data = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789';
    for(var i = 0; i <= 90; i +=30){//四位验证码
        var c = data[randNum(0,data.length - 1)];
        cxt.beginPath();
        cxt.fillStyle = randColor(60,160);
        cxt.font = randNum(15,40) + 'px SimHei';
        cxt.fillText(c, i + randNum(0,15),randNum(15,30));//[0,15) [30,45) [60,75) [90,115)
        cxt.closePath();
    }
    //渲染干扰线
    for(var j = 0; j < 10; j ++){
        cxt.beginPath();
        cxt.moveTo(randNum(0,120), randNum(0,120));//这里的randNum(min,max)与canvas的画板宽高相联系，
        cxt.lineTo(randNum(0,120), randNum(0,120));
        cxt.strokeStyle = randColor(60,120);
        cxt.stroke();
    }
    for(var i = 0; i < 10; i ++){
        cxt.beginPath();
        cxt.strokeStyle = randColor(50,130);
        cxt.arc(randNum(0,120),randNum(0,30),randNum(1,3),0,2*Math.PI);
        cxt.stroke();
        cxt.closePath();
    }
}
function randColor(min,max){//max+1是取不到的，但是max是可以取到的，所以向下取整刚好取到[min,max]。
    var r = Math.floor(Math.random()*(max-min + 1)+min);//Math.random * （max- min)==>[o,min)变成[min,max-min]的范围
    var g =  Math.floor(Math.random()*(max-min + 1)+min);
    var b =  Math.floor(Math.random()*(max-min + 1)+min);
    return 'rgb('+r+','+g+','+b+')';
}
function randNum(min,max){
    var num = Math.floor(Math.random()*(max-min + 1)+min);
    return num;
    console.log(num);
}