注意：
真正项目中验证码图片都是由服务器端(PHP、JSP、Node.js)技术来生成。
最终效果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>验证码图片</h3> <canvas id="c9"></canvas> <script> var cw = 120; //画布的总宽度 var ch = 30; //画布的总高度 c9.width = cw; c9.height = ch; var ctx = c9.getContext('2d'); /**1.绘制背景颜色——填充矩形**/ ctx.fillStyle = rc(150, 230); ctx.fillRect(0, 0, cw, ch); /**2.循环绘制4个随机字符**/ ctx.textBaseline = 'top'; var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789'; for (var i = 0; i < 4; i++) { var c = pool[rn(0, pool.length)];//一个随机字符 var fs = rn(10, 40); //字体大小 ctx.font = fs + 'px SimHei'; var fc = rc(50, 150); //字体颜色 ctx.strokeStyle = fc; var deg = rn(-45, 45);//旋转角度 var x = -fs / 2; //每个字符左上角的坐标 var y = -fs / 2; //绘制一个字符: 保存状态->平移->旋转->绘制->恢复状态 ctx.save(); ctx.translate(30*i+15, 15); ctx.rotate(deg*Math.PI/180); ctx.strokeText(c, x, y); ctx.restore(); } /**3.绘制5条干扰线——直线路径**/ for(var i=0; i<5; i++){ ctx.beginPath(); ctx.moveTo(rn(0,cw), rn(0, ch)); ctx.lineTo(rn(0,cw), rn(0, ch)); ctx.strokeStyle = rc(0, 255); ctx.stroke(); } /**4.绘制50个杂色点——半径为0.5圆形路径**/ for(var i=0; i<50; i++){ ctx.beginPath(); ctx.arc(rn(0,cw), rn(0, ch),0.5, 0, 2*Math.PI); ctx.fillStyle = rc(0, 255); ctx.fill(); } //random number，返回指定范围内的随机整数 function rn(min, max) { return Math.floor(Math.random() * (max - min) + min); } //random color，返回指定范围内的随机颜色 function rc(min, max) { var r = rn(min, max); var g = rn(min, max); var b = rn(min, max); return `rgb(${r}, ${g}, ${b})`; } </script> </body> </html>