canvas 做一个验证码

今天看了一个资料，讲的是利用html5里边新增元素canvas做一个验证码，然后就自己写点东西

一、首先在body里边建立一个canvas标签，并且设置ID。

<canvas id="mycanvas"></canvas>

二、获取canvas对象，设置canvas绘图环境

var canvas=document.getElementById("mycanvas");//获取canvas对象
var context=canvas.getContext('2d');//获取到canvas绘图环境

三、设置所画的图形的宽度和高度，然后画出图形

canvas.width=120;//设置验证码框的宽度
canvas.height=40;//设置验证码框的长度
context.strokeRect(0,0,120,40);//绘制一个矩形框

四、设置变量存储数据

var aCode=['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','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',1,2,3,4,5,6,7,8,9,0]

五、循环变量，产生四位随机数 

  for(var i=0;i<4;i++){
	var x=20+20*i;
	var y=20+Math.random()*10;//产生一个随机值
	var index=Math.floor(Math.random()*36)
	var txt=aCode[index];//获取当前文字的索引
	context.font="bold 20px 微软雅黑";//设置
	context.fillStyle=getColor();//设置字体颜色
	context.fillText(txt,x,y);//将文字写道canvas上
	}

六、制作八条干扰线

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

七、制作二十个干扰点 

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

八、写一个过去颜色的方法    

function getColor(){//获取字体的颜色的方法         
	var r=Math.floor(Math.random()*256)  
	var g=Math.floor(Math.random()*256)  
	var b=Math.floor(Math.random()*256)  
	return"rbg("+r+","+b+","+g+")";      
}