canvas绘制随机验证码

HTML标签部分

<canvas id="code" width="100" height="50" style="border: 1px solid #ccc"></canvas>

宽为100 高为50 边框为颜色为#ccc的1px的实线

画布获取

        var canvas= document.getElementById("code");//获取画布
        var canvasW=canvas.width; //获取画布宽
        var canvasH=canvas.height; // 获取画布高

封装0~最大值的随机数的函数

        var getRandom=function (maxNum) {   
        return Math.floor(Math.random()*maxNum); //封装0~最大值的随机数的函数
        }

封装随机颜色函数

r，g，b都为0~255的随机颜色

        var getColor=function () {
        var r=getRandom(256), //因为随机只能取到最大值的前一位
        g=getRandom(256),
        b=getRandom(256);
            return "rgb("+ r +","+g +"," + b + ")" 
        }

绘制随机线

        var ctx=canvas.getContext("2d"); //创建获取执行期上下文
       for (var i=0;i<lineNum;i++){ //创建循环生成随机颜色的线
        ctx.beginPath(); //开始绘画
        ctx.moveTo(getRandom(canvasW),getRandom(canvasH));  //绘画随机开始绘画点
        ctx.lineTo(getRandom(canvasW),getRandom(canvasH));  //绘画随机结束点生成线
        ctx.strokeStyle=getColor(); //给线添加随机颜色
        ctx.closePath(); //结束绘画
        ctx.stroke(); //绘画
        }

绘制随机点

 		var lineNum=5,arcNum=100;   //干扰点和干扰杂色点
         for (var i=0;i<arcNum;i++){ //创建循环生成随机颜色的点
        ctx.beginPath(); //开始绘画
        ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI); // 生成圆心位置随机的半径为1从0度开始绘画的圆
        ctx.fillStyle=getColor();//给点填充随机颜色
        ctx.closePath();//结束绘画
        ctx.fill(); //填充
        

绘制随机文本

在这里插入代码片

成果展示