js源码实现随机四位验证码

HTML

使用canvas画布绘制

 <canvas width="400px" height="120px" id="canvas"></canvas>

js

分析：

• 随机的背景，随机的字体大小， 随机的线条， 随机的50个原点， 随机的 字体颜色，随机的位置 ----封装一个产生随机数的函数
• 根据不同的x y轴的 不同的位置
• 不同的背景颜色 rgba()
• 随机的线条，封装绘制 线条的函数
• 随机的圆点 ，for循环50个圆点绘制圆点的方法

//封装产生随机数的方法
 function random(n){
    return parseInt(Math.random()*n)
 }
 //这里字体的大小单独随机，限制最小的字体大小为40px
 function size(){
    return parseInt(Math.random()*40) + 40;
  }

随机不同颜色的50个圆点

 for (let i = 0; i < 50; i++) {
     context.beginPath();
     //开始绘制
     //圆点的颜色
     context.fillStyle = 'rgb('+ random(256) + ',' + random(256) + ',' + random(256) + ',0.3)';
     //绘制圆
     context.arc(random(400),random(120) , 2, 0, Math.PI / 180 * 360);   
     //实心填充
     context.fill();                 
     context.closePath();
 }

随机不同的长度的线条，根据传入的参数，产生不同数量的线条

function line(n){
   	for (let i = 0; i < n; i++) {    
   	  //保存当前原点的坐标位置    
	     context.save();
	     context.beginPath();        
	     context.linewidth = random(6);
	     //随机的起点位置
	     context.moveTo(random(400), random(120) );
	     context.lineTo(random(400), random(120) ); 
	    //线条的样式      
	     context.strokeStyle ='black';
	     context.stroke(); 
	    
	     context.translate(350, 60);
	      //线条倾斜的角度          
	     context.rotate(Math.PI / 180 * random(360));
	     //恢复原点的位置
	     context.restore(); 
	     //结束绘制
	     context.closePath();               
  }
}
//随机产生线条
line(5)

随机产生数字和字母

var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXWZ";
var arr = str.split("");
//将所有会出现的验证数字和字母存储到一个数组里面
	context.save();  
	//随机产生一个size() 的 字体样式
	context.font =  size() + "px 宋体";
	//字体的颜色，这里用 rgb  文字用深色 ，背景用 rgba 浅色的背景
	context.fillStyle ='rgb('+ random(256) + ',' + random(256) + ',' +random(256) + ')';         
	context.translate(50, 60);     
	//文本的旋转 随机角度
	context.rotate(Math.PI / 180 * random(360));
	//随机产生一个文本
	context.fillText(arr[random(62)],-25, 10);
	//恢复原点的位置
	context.restore();