掌握使用canvas绘制线条和圆形以及绘制文字
实现思路：
先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可生成随机的验证码。需要刷新，直接把以下代码封装在函数里，用一个事件触发即可。
源代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas验证码</title> </head> <body> <canvas></canvas> <script src="https://www.jb51.net/jq/jquery-3.2.1.min.js"></script> <script> var canvasW=$("#code").width(); var canvasH=$("#code").height(); //获取任意区间随机数 var getRandom=function (maxNum) { return Math.floor(Math.random()*maxNum); } //随机颜色 var getColor=function () { var r=getRandom(256), g=getRandom(256), b=getRandom(256); return "rgb("+[r,g,b].join(',')+")"; } var ctx=$("#code")[0].getContext("2d"); var lineNum=3,arcNum=20; //绘制线 for (var i=0;i<lineNum;i++){ ctx.beginPath(); ctx.moveTo(getRandom(canvasW),getRandom(canvasH)); ctx.lineTo(getRandom(canvasW),getRandom(canvasH)); ctx.strokeStyle=getColor(); ctx.closePath(); ctx.stroke(); } //绘制点 for (var i=0;i<arcNum;i++){ ctx.beginPath(); ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI); ctx.fillStyle=getColor(); ctx.closePath(); ctx.fill(); } //绘制验证码 var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";; for(var i=0;i<4;i++){ var txt=codeTxt.split("")[getRandom(codeTxt.length)]; //绘制验证码 ctx.beginPath(); ctx.font="23px 微软雅黑"; ctx.fillStyle=getColor(); ctx.fillText(txt,20*i,25); ctx.closePath(); } </script> </body> </html>
最终效果：
