今天看了一个资料,讲的是利用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+")";
}