用canvas绘制验证码
在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。
验证码一般用PHP和java等后端语言编写；
但是在前端，用canva或者SVG也可以绘制验证码；
让我们先来看一个简单的但是有点丑的验证码：
绘制验证码的关键点：选取的四个字符随机、字体的颜色、旋转角度随机、其中有五条线和50个随机的小点来干扰；
步骤：
画浅色背景
画随机文字
画5条干扰线
画100条干扰点（半径为1的圆）
1.新建一个函数产生随机数
//1.新建一个函数产生随机数
function rn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
2.新建一个函数产生随机的颜色
//2.新建一个函数产生随机颜色
function rc(min,max){
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}
3.填充背景颜色，背景颜色要浅一点
var w=120;
var h=40;
var ctx=c1.getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
4.随机产生字符串
//4.随机产生字符串
var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
for(var i=0;i<4;i++){
var c=pool[rn(0,pool.length)];//随机的字
var fs=rn(18,40);//字体的大小
var deg=rn(-30,30);//字体的旋转角度
ctx.font=fs+'px Simhei';
ctx.textBaseline="top";
ctx.fillStyle=rc(80,150);
ctx.save();
ctx.translate(30*i+15,15);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(c,-15+5,-15);
ctx.restore();
}
5.随机产生5条干扰线
//5.随机产生5条干扰线,干扰线的颜色要浅一点 for(var i=0;i<5;i++){ ctx.beginPath(); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.strokeStyle=rc(180,230); ctx.closePath(); ctx.stroke(); }
6.随机产生40个干扰的小点
//6.随机产生40个干扰的小点 for(var i=0;i<40;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.closePath(); ctx.fillStyle=rc(150,200); ctx.fill(); }
7.完整源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{text-align: center} canvas{border:1px solid greenyellow} </style> </head> <body> <h1>canvas绘制验证码</h1> <canvas width="120" height="40" id="c1"> </canvas> <script> //1.新建一个函数产生随机数 function rn(min,max){ return parseInt(Math.random()*(max-min)+min); } //2.新建一个函数产生随机颜色 function rc(min,max){ var r=rn(min,max); var g=rn(min,max); var b=rn(min,max); return `rgb(${r},${g},${b})`; } //3.填充背景颜色,颜色要浅一点 var w=120; var h=40; var ctx=c1.getContext("2d"); ctx.fillStyle=rc(180,230); ctx.fillRect(0,0,w,h); //4.随机产生字符串 var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890"; for(var i=0;i<4;i++){ var c=pool[rn(0,pool.length)];//随机的字 var fs=rn(18,40);//字体的大小 var deg=rn(-30,30);//字体的旋转角度 ctx.font=fs+'px Simhei'; ctx.textBaseline="top"; ctx.fillStyle=rc(80,150); ctx.save(); ctx.translate(30*i+15,15); ctx.rotate(deg*Math.PI/180); ctx.fillText(c,-15+5,-15); ctx.restore(); } //5.随机产生5条干扰线,干扰线的颜色要浅一点 for(var i=0;i<5;i++){ ctx.beginPath(); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.strokeStyle=rc(180,230); ctx.closePath(); ctx.stroke(); } //6.随机产生40个干扰的小点 for(var i=0;i<40;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.closePath(); ctx.fillStyle=rc(150,200); ctx.fill(); } </script> </body> </html>
