canvas 绘制验证码
Posted 小欣子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 绘制验证码相关的知识，希望对你有一定的参考价值。
之前用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>
效果(这里只有图片,没有点击的动态效果,需要自己在本地运行看效果)
以上是关于canvas 绘制验证码的主要内容，如果未能解决你的问题，请参考以下文章