验证码一般有服务器端生成,本次生成验证码只是为了学习canvas的用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--<script src="JS/jquery-3.3.1.js"></script>--> <script type="text/javascript"> //获取随机颜色方法 function GetColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")" } //页面加载事件 window.onload = function () { YZM(); }; //绘制验证码方法 function YZM() { var canvas = document.getElementById("canvas");//获取到canvas的DOM元素 var context = canvas.getContext("2d");//定义canvas的绘制环境 canvas.width = 120;//设置canvas的宽度 canvas.height = 40;//设置canvas的高度 context.strokeRect(0, 0, 120, 40);//绘制一个矩形框 var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'F', 'I ', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; for (var i = 0; i < 4; i++) { var x = 20 + i * 20;//定义每个字符的间距 var y = 20 + Math.random() * 10;//定义字符上下浮动 var index = Math.floor(Math.random() * aCode.length);//向下取整数 获得aCode里面的随机索引 var txt = aCode[index];//取出txt context.font = "bold 25px 微软雅黑";//设置字体 context.fillStyle = GetColor();//获取随机颜色 //文字旋转 context.translate(x, y);//画布平移至坐标x,y var deg = 40 * Math.random()*(Math.random > 0.5 ? 1 : -1) * Math.PI / 180;//获取一个随机弧度值 context.rotate(deg);//将画布旋转 context.fillText(txt, 0, 0);//在坐标点绘制文字 context.rotate(-deg);//将画布还原 context.translate(-x, -y);//将画布还原 } //绘制8条随机线 for (var i = 0; i < 8; i++) { context.beginPath();//开始一个路径 context.moveTo(Math.random() * 120, Math.random() * 40);//设置开始点 context.lineTo(Math.random() * 120, Math.random() * 40);//设置结束点 context.strokeStyle = GetColor();//随机颜色 context.stroke();//开始绘制 } for (var i = 0; i < 10; i++) { context.beginPath();//开始一个路径 var x = Math.random() * 120;//定义点的x坐标 var y = Math.random() * 40;//定义点的y坐标 context.moveTo(x, y);//开始点移动至坐标点 context.fillStyle = GetColor();//获取随机颜色 context.fillText("·", x, y);//开始绘制 } }; </script> </head> <body> <canvas id="canvas">您的浏览器不支持 HTML5 canvas 标签。</canvas> <a href="#" onclick="YZM()">再试一次</a> </body> </html>