canvas绘制随机验证码

效果图：

 

思路：

1, 绘制canvas画布，进行基础设置

2.绘制一个矩形

3.设置验证码的随机数

4.设置验证码随机数的随机颜色

5.绘制随机干扰线

6,绘制随机干扰点

经过以上六个步骤，验证码的雏形就做好了

7.旋转验证码中的随机数（这部分在章节内详细说明）

8.重新获取验证码

 缕清思路，然后一步步操作

1.进行canvas的基础操作

（1）在html中定义画布

1  <canvas id="canvas"></canvas>

（2）js定义

1  window.onload = function(){
2  　　var canvas = document.getElementById("canvas"); //获取到canvas对象
3 　　 var context = canvas.getContext("2d"); //获取到canvas绘图环境
4      //设置画布大小
5      canvas.width = 120;
6      canvas.height = 40;
7 };

2.绘制矩形

context.strokeRect(0,0,120,40);

3.设置验证码的随机数

（1）定义一个数组存放验证码的随机数，我设置了数字和小写字母

 var aCode = [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'];

（2）设置验证码的随机数

for(var i = 0; i < 4; i ++){
    var x = 20 + i * 20;
    var y = 10 + Math.random() * 10;
    var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
    var txt = aCode[index]; //获取到数组里面的随机的内容
    context.font = "bold 20px 微软雅黑"; //设置文字样式
    context.fillText(txt,x,y);
}

4.设置验证码随机数的随机颜色

（1）通过以上步骤可以看到已经出现了随机数，接下来需要设置随机数的随机颜色

　　　　function getColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            if(r == 255 && g == 255 && b == 255){
                r = 0;
                g = 0;
                b = 0;
            }
            return "rgb("+r+","+g+","+b+")";
        }

（2）然后再将随机颜色加进去

 context.fillStyle = getColor();

5.设置随机干扰线

//绘制干扰线
            for(var i = 0; i < 8; i ++ ){
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo(Math.random()*120,Math.random()*40);
                context.lineTo(Math.random()*120,Math.random()*40);
                context.stroke();
            }

6,绘制随机干扰点

干扰点和干扰线的原理是一样的，干扰点可以看成很小的干扰线

//绘制干扰点
            for(var i = 0;i <20 ;i ++){
                var x = Math.random() *120;
                var y = Math.random() *40;
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo( x,y);
                context.lineTo(x+1,y+1);
                context.stroke();
            }

7.旋转验证码中的随机数

因为canvas是一个画布，所以canvas中的内容只是“画”中的一部分，不能单独旋转，这里旋转的原理是每当绘制一个数字的之前将画布移动到相应数字的x,y的点，然后以点进行旋转，旋转好以后，绘制随机数，最后将画布还原到原来的位置进行下一个随机数的绘制

 //产生随机数
            for(var i = 0; i < 4; i ++){
                var deg = Math.random() * 180 * Math.PI / 180;
                var x = 20 + i * 20;
                var y = 10 + Math.random() * 10;
                var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
                var txt = aCode[index]; //获取到数组里面的随机的内容
                context.font = "bold 20px 微软雅黑"; //设置文字样式
                context.fillStyle = getColor();
                context.translate(x,y);
                context.rotate(deg);
                context.fillText(txt,0,0);
                context.rotate(-deg);
                context.translate(-x,-y);

            }

8.重新获取验证码

重新获取验证码需要在body中添加一个点击事件

 <a onclick="refresh()">重新获取</a>

然后将绘制随机数的代码封装成一个方法，我这里方法为draw()，canvas的刷新需要重新定义画布

　　　　function refresh(){
            var canvas = document.getElementById("canvas"); //获取到canvas对象
            var context = canvas.getContext("2d"); //获取到canvas绘图环境
            draw(canvas,context);
        }

注：腾讯课堂视频小结