canvas 绘制验证码

之前用canvas绘制了八卦图, 今天用canvas绘制的验证码, 很多地方都会用到, 记录下来 ,以后可以直接用

用到的方法

矩形

　　canvas.getContext('2d');　　　　//构建绘图环境

　　canvas.clearRect(x,y,w,h);　　　　//清空之前绘制的矩形,释放空间

　　canvas.fillStyle='颜色';　　　　　　//填充颜色

　　canvas.fillStyle='rgb(r,g,b)';　　　　//填充颜色

　　canvas.fillRect(x,y,w,h);　　　　　　//绘制矩形

文字

　　canvas.font='12px 微软雅黑';　　　　//字体大小,字体

　　canvas.fillText('文字',x,y);　　　　　　//在画布上写字(文字内容,x坐标,y坐标);

线条,路径(干扰线)

　　canvas.beginPath();　　　　　　　　//绘制线条,路径开始,子路经的集合

　　canvas.moveTo(x,y);　　　　　　　　//起始点

　　canvas.lineTo(x,y);　　　　　　　　　//终止点

　　canvas.strokeStyle='颜色';　　　　　　//路径的颜色

　　canvas.stroke();　　　　　　　　　　　//链接起始点和终止点

点,圆圈(干扰点)

　　canvas.arc(x,y,z,0,2*Math.PI);　　　　　　//完整圆(x,y,半径,起始角,结束角);起始角和结束角决定了该圆是否完整,取值范围[0,2]

其他

　　Math.random();　　　　　　　　　　　　//[0,1)之间的随机数

　　Math.floor();　　　　　　　　　　　　　　//向下取整

开始画验证码

1.定义一个画布,宽高不能写在style内

<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>

2.获取并画布并构建绘图环境

var cas=document.querySelector('#canvas');
var ctx=cas.getContext('2d');     //构建绘图环境

3.绘制一个矩形,要求该矩形的背景色为随机(每次刷新页面的背景色都不一样);

3.1首先生成一个随机背景的方法,颜色参数(0,255);

    function ranbColor(min,max){
        var r=Math.floor(Math.random()*(max-min+1)+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+')';
    }

3.2绘制矩形

    function draw(){
        ctx.fillStyle=ranbColor(170,250);   //这里背景色的取值范围为[170,250],颜色比较适中
        ctx.fillRect(0,0,120,30);    //绘制矩形
    }

4.四位随机数

4.1生成一个有范围的随机数

    function ranbNum(min,max){
        var num=Math.floor(Math.random()*(max-min+1)+min);
        return num;
    }

4.2生成一个四位数的随机数

        var data='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
        for(var i=0;i<120;i+=30){　　//循环四次,取四个字
            var c=data[ranbNum(0,data.length-1)]; //index为随机数,[0,data.length-1]  取字(随机)
            ctx.fillStyle=ranbColor(60,160);    //字体颜色
            ctx.font=ranbNum(15,40)+'px SimHei';  //字体大小,字体
            ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30));   //字体填充(字内容,x轴,y轴)位置都是随机
        }

5.干扰线

        for (var i=0;i<10;i++) {
            ctx.beginPath(); //路径开始,子路经的集合
            ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始点(x,y),都随机
            ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//终止点(x,y)
            ctx.strokeStyle=ranbColor(60,160);//路径的颜色
            ctx.stroke();  //将上面的两个点连接起来
        }

6.干扰点,干扰圆圈

 //绘制干扰点
for (var i=0;i<10;i++) {
　　ctx.beginPath(); //路径开始
　　ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//画圆(x,y,z,0,2*Math.PI) x坐标,y坐标,半径,完整圆
　　ctx.strokeStyle=ranbColor(60,160);
　　ctx.stroke();
}

完整代码, 通过点击事件来刷新文字内容和背景颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--兼容ie9+-->
        <canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>
    </body>
</html>
<script>
    var cas=document.querySelector('#canvas');
    var ctx=cas.getContext('2d');
    draw();
    cas.onclick=function(){
        ctx.clearRect(0,0,120,30);   //清空之前的矩形,释放空间
        draw();
        //随机4位数
        var data='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
        for(var i=0;i<120;i+=30){
            var c=data[ranbNum(0,data.length-1)]; //index为随机数,[0,data.length-1]  取字
            ctx.fillStyle=ranbColor(60,160);    //字体颜色
            ctx.font=ranbNum(15,40)+'px SimHei';  //字体大小,字体
            ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30));   //字体填充(字内容,x轴,y轴)
        }
        
        //绘制干扰线
        for (var i=0;i<10;i++) {
            ctx.beginPath(); //路径开始,子路经的集合
            ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始点(x,y),都随机
            ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//终止点(x,y)
            ctx.strokeStyle=ranbColor(60,160);//路径的颜色
            ctx.stroke();  //将上面的两个点连接起来
        }
        
        
        //绘制干扰点
        for (var i=0;i<10;i++) {
            ctx.beginPath(); //路径开始
            ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//画圆(x,y,z,0,2*Math.PI) x坐标,y坐标,半径,完整圆
            ctx.strokeStyle=ranbColor(60,160);
            ctx.stroke();
        }
    }
    
    //随机数方法
    function ranbNum(min,max){
        var num=Math.floor(Math.random()*(max-min+1)+min);
        return num;
    }
    //绘制矩形
    function draw(){
        ctx.fillStyle=ranbColor(170,250);   //这里背景色的取值范围为[170,250],颜色比较适中
        ctx.fillRect(0,0,120,30);    //绘制矩形
    }
    
    //颜色界于170到250,随机
    function ranbColor(min,max){
        var r=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
        var g=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
        var b=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
        return 'rgb('+r+','+g+','+b+')';
    }
</script>

效果(这里只有图片,没有点击的动态效果,需要自己在本地运行看效果)