纯属对Canvas API的练习
效果图：
目标：
1.画布中随机出现4个字母或数字的验证码
2.验证吗，内容随机，颜色随机，位置在当前块内随机；
3.添加4条干扰线，颜色长度随机
4.添加50个干扰颗粒，颜色随机，半径为1；
思路：
1.由于使用随机数据多，所以封装随机数函数 rn(min,max)
function rn(min,max){ return Math.floor(Math.random()*(max-min)+min); }
//返回大于等于min ,小于max的数字
2.由于随机颜色使用多，封装随机颜色函数 rc(min,max)
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 pool=‘ABCDEFGHEIJDKMNP123456789‘;
//绘制4次 for(var i=0;i<4;i++){ var txt=pool[rn(0,pool.length)]; ctx.font="10px Arial"; ctx.save();
//获取文本宽度 var tw=ctx.measureText(txt).width;
//以中心旋转，旋转角度（0-90）随机 ctx.translate(30*i+15,10); ctx.rotate(rn(0,90)*Math.PI/180); ctx.fillStyle=rc(80,140); ctx.textBaseline="top";
//绘制文本 ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10)) ctx.restore(); }
4.6条干扰线
for(var i=0;i<6;i++){ ctx.beginPath(); ctx.strokeStyle=rc(60,120); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.stroke(); }
5. 50个干扰点
for(var i=0;i<50;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.fillStyle=rc(0,255); ctx.fill(); }
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{text-align: center} </style> </head> <body> <h3>Canvas绘制画布</h3> <canvas id="c1"></canvas> <script> var w=120; var h=30; c1.width=w; c1.height=h; var ctx=c1.getContext("2d"); ctx.fillStyle=rc(200,250); ctx.fillRect(0,0,w,h); // 绘制随机文本 var pool=‘ABCDEFGHEIJDKMNP123456789‘; for(var i=0;i<4;i++){ var txt=pool[rn(0,pool.length)]; ctx.font="10px Arial"; ctx.save(); var tw=ctx.measureText(txt).width; ctx.translate(30*i+15,10); ctx.rotate(rn(0,90)*Math.PI/180); ctx.fillStyle=rc(80,140); ctx.textBaseline="top"; ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10)) ctx.restore(); } // 绘制随机6条干扰线 for(var i=0;i<6;i++){ ctx.beginPath(); ctx.strokeStyle=rc(60,120); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.stroke(); } // 50个干扰点，半径为1的圆 for(var i=0;i<50;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.fillStyle=rc(0,255); ctx.fill(); } // 随机颜色 function rc(min,max){ var r=rn(min,max); var g=rn(min,max); var b=rn(min,max); return `rgb(${r},${g},${b})`; } // 随机数字 function rn(min,max){ return Math.floor(Math.random()*(max-min)+min); } </script> </body> </html>
