canvas 做一个验证码

柔光的暖阳◎ 2022-05-27 02:36 222阅读 0赞

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

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

二、获取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+")";      
    }