之前用canvas绘制了八卦图, 今天用canvas绘制的验证码, 很多地方都会用到, 记录下来 ,以后可以直接用
用到的方法
矩形
canvas.getContext('2d'); //构建绘图环境
canvas.clearRect(x,y,w,h); //清空之前绘制的矩形,释放空间
canvas.fillStyle='颜色'; //填充颜色
canvas.fillStyle='rgb(r,g,b)'; //填充颜色
canvas.fillRect(x,y,w,h); //绘制矩形
文字
canvas.font='12px 微软雅黑'; //字体大小,字体
canvas.fillText('文字',x,y); //在画布上写字(文字内容,x坐标,y坐标);
线条,路径(干扰线)
canvas.beginPath(); //绘制线条,路径开始,子路经的集合
canvas.moveTo(x,y); //起始点
canvas.lineTo(x,y); //终止点
canvas.strokeStyle='颜色'; //路径的颜色
canvas.stroke(); //链接起始点和终止点
点,圆圈(干扰点)
canvas.arc(x,y,z,0,2*Math.PI); //完整圆(x,y,半径,起始角,结束角);起始角和结束角决定了该圆是否完整,取值范围[0,2]
其他
Math.random(); //[0,1)之间的随机数
Math.floor(); //向下取整
开始画验证码
1.定义一个画布,宽高不能写在style内
<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>
2.获取并画布并构建绘图环境
var cas=document.querySelector('#canvas'); var ctx=cas.getContext('2d'); //构建绘图环境
3.绘制一个矩形,要求该矩形的背景色为随机(每次刷新页面的背景色都不一样);
3.1首先生成一个随机背景的方法,颜色参数(0,255);
function ranbColor(min,max){ var r=Math.floor(Math.random()*(max-min+1)+min); var g=Math.floor(Math.random()*(max-min+1)+min); var b=Math.floor(Math.random()*(max-min+1)+min); return 'rgb('+r+','+g+','+b+')'; }
3.2绘制矩形
function draw(){ ctx.fillStyle=ranbColor(170,250); //这里背景色的取值范围为[170,250],颜色比较适中 ctx.fillRect(0,0,120,30); //绘制矩形 }
4.四位随机数
4.1生成一个有范围的随机数
function ranbNum(min,max){ var num=Math.floor(Math.random()*(max-min+1)+min); return num; }
4.2生成一个四位数的随机数
var data='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890'; for(var i=0;i<120;i+=30){ //循环四次,取四个字 var c=data[ranbNum(0,data.length-1)]; //index为随机数,[0,data.length-1] 取字(随机) ctx.fillStyle=ranbColor(60,160); //字体颜色 ctx.font=ranbNum(15,40)+'px SimHei'; //字体大小,字体 ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30)); //字体填充(字内容,x轴,y轴)位置都是随机 }
5.干扰线
for (var i=0;i<10;i++) { ctx.beginPath(); //路径开始,子路经的集合 ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始点(x,y),都随机 ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//终止点(x,y) ctx.strokeStyle=ranbColor(60,160);//路径的颜色 ctx.stroke(); //将上面的两个点连接起来 }
6.干扰点,干扰圆圈
//绘制干扰点 for (var i=0;i<10;i++) { ctx.beginPath(); //路径开始 ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//画圆(x,y,z,0,2*Math.PI) x坐标,y坐标,半径,完整圆 ctx.strokeStyle=ranbColor(60,160); ctx.stroke(); }
完整代码, 通过点击事件来刷新文字内容和背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--兼容ie9+-->
<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>
</body>
</html>
<script>
var cas=document.querySelector('#canvas');
var ctx=cas.getContext('2d');
draw();
cas.onclick=function(){
ctx.clearRect(0,0,120,30); //清空之前的矩形,释放空间
draw();
//随机4位数
var data='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
for(var i=0;i<120;i+=30){
var c=data[ranbNum(0,data.length-1)]; //index为随机数,[0,data.length-1] 取字
ctx.fillStyle=ranbColor(60,160); //字体颜色
ctx.font=ranbNum(15,40)+'px SimHei'; //字体大小,字体
ctx.fillText(c,i+ranbNum(5,12),ranbNum(15,30)); //字体填充(字内容,x轴,y轴)
}
//绘制干扰线
for (var i=0;i<10;i++) {
ctx.beginPath(); //路径开始,子路经的集合
ctx.moveTo(ranbNum(0,120),ranbNum(0,120));//起始点(x,y),都随机
ctx.lineTo(ranbNum(0,120),ranbNum(0,120));//终止点(x,y)
ctx.strokeStyle=ranbColor(60,160);//路径的颜色
ctx.stroke(); //将上面的两个点连接起来
}
//绘制干扰点
for (var i=0;i<10;i++) {
ctx.beginPath(); //路径开始
ctx.arc(ranbNum(0,120),ranbNum(0,30),ranbNum(1,5),0,2*Math.PI);//画圆(x,y,z,0,2*Math.PI) x坐标,y坐标,半径,完整圆
ctx.strokeStyle=ranbColor(60,160);
ctx.stroke();
}
}
//随机数方法
function ranbNum(min,max){
var num=Math.floor(Math.random()*(max-min+1)+min);
return num;
}
//绘制矩形
function draw(){
ctx.fillStyle=ranbColor(170,250); //这里背景色的取值范围为[170,250],颜色比较适中
ctx.fillRect(0,0,120,30); //绘制矩形
}
//颜色界于170到250,随机
function ranbColor(min,max){
var r=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
var g=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
var b=Math.floor(Math.random()*(max-min+1)+min);//170+[0,80)
return 'rgb('+r+','+g+','+b+')';
}
</script>
效果(这里只有图片,没有点击的动态效果,需要自己在本地运行看效果)
