用canvas写随机验证码

body部分

<canvas id="vas"></canvas>
<button>刷新验证码</button>

js部分
①：设置属性/获取元素

var vas = document.getElementById("vas");//获取canvas
var pen = vas.getContext("2d");//绘制画笔
var btn = document.getElementsByTagName("button")[0];//获取按钮

var obj = {
	arr : [],//验证码内容
	wid : 500,//canvas宽度
	hei : 500,//canvas高度
	con_text : 4,//验证码文字数量
	con_boll : 50,//干扰球数量
	con_line : 500,//干扰线数量
	font_min : 12,//最小字体大小
	font_max : 38,//最大字体大小
}//自定义数据

vas.width = obj.wid;//给canvas设置宽
vas.height = obj.hei;//给canvas设置高

②：填充验证码数据

for(var i = 0; i < 26; i ++){
	if(i <= 9){
		obj.arr.push(i);//0-9数字
	}
    obj.arr.push(String.fromCharCode(65+i));//26个大写字母
    obj.arr.push(String.fromCharCode(97+i));//26个小写字母
}

③： 绘制随机颜色函数

function rgb(){
	return "rgb("+~~(Math.random()*256)+","+~~(Math.random()*256)+","+~~(Math.random()*256)+")"
}

④：随机文字/干扰线/干扰球

function fn(){
	pen.clearRect(0,0,obj.wid,obj.hei);//清除画图
	pen.fillStyle = rgb();//填充色
	pen.fillRect(0,0,obj.wid,obj.hei);//绘制矩形
	
	for(var j = 0; j < obj.con_boll; j++){
		pen.beginPath();
		pen.fillStyle = rgb();
		pen.arc(~~(Math.random()*obj.wid),~~(Math.random()*obj.hei),1,0,Math.PI*2);
		pen.fill();
		pen.closePath();
	}//绘制干扰球
	
	for(var i = 0; i < obj.con_text; i ++){
		pen.save();
		pen.beginPath();
		pen.font = ~~(Math.random()*obj.font_max+obj.font_min) +"px 微软雅黑";
		pen.fillStyle = rgb();
		pen.translate(~~(Math.random()*(obj.wid-50)),~~(Math.random()*(obj.hei-50)));
		pen.rotate(Math.PI/180*~~(Math.random()*360))
		pen.textBaseline="top";
		pen.fillText(obj.arr[~~(Math.random()*(obj.arr.length-1))],0,0);
		pen.strokeStyle = rgb();
		pen.lineWidth = 1;
		pen.moveTo(0,0);
		pen.lineTo(50,0);
		pen.stroke();
		pen.restore();
		pen.closePath();
	}//绘制文字/干扰线
}

⑤：绑定点击事件，并且页面初始化

btn.addEventListener("click",fn,false);//绑定点击事件
fn();