Java代码：

//后台生成随机数@GetMapping("/randomNum")@ResponseBodypublic void findRandom (HttpServletResponse response) throws IOException{// 验证码字符个数int codeCount = 4;char[] codeSequence = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };// 创建一个随机数生成器类Random random = new Random();// randomCode用于保存随机产生的验证码，以便用户登录后进行验证。StringBuffer randomCode = new StringBuffer();//获取到数组的长度int aLength = codeSequence.length;for (int i = 0; i < codeCount; i++) {// 得到随机产生的验证码数字。String strRand = String.valueOf(codeSequence[random.nextInt(aLength)]);// 将产生的四个随机数组合在一起。randomCode.append(strRand).append(",");}PrintWriter out = response.getWriter();out.print(randomCode);}

Html代码：

<!--验证码元素-->
<div class="form-group"><div class="col-lg-12"><input class="layui-input" id="checkCodeYZM"  name="checkCode" placeholder="验证码" lay-verify="myRequired" type="text" autocomplete="off"><canvas id="canvas"  class="canvasCode"></canvas></div>
</div>

JS代码：

<script>
var show_num = [];//将要生成的随机验证码drawshow_num(show_num);/**点击验证码重新生成*/$("#canvas").on('click', function () {drawshow_num(show_num);});function drawshow_num(show_num) {$.ajax({cache : true,type : "GET",url : "/randomNum",async : false,success : function(k) {draw(show_num,k);}});}function randomColor() {//得到随机的颜色值==>把颜色设置为黑色，看的清楚var r = Math.floor(0);var g = Math.floor(0);var b = Math.floor(0);return "rgb(" + r + "," + g + "," + b + ")";}function draw(show_num,sCode) {var canvas_width=100;var canvas_height=36;var canvas = document.getElementById("canvas");//获取到canvas的对象，演员var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台canvas.width = canvas_width;canvas.height = canvas_height;var aCode = sCode.split(",");for (var i = 0; i <= 3; i++) {var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度var txt = aCode[i];//得到随机的一个内容show_num[i] = txt.toLowerCase();var x = 10 + i * 20;//文字在canvas上的x坐标var y = 20 + Math.random() * 8;//文字在canvas上的y坐标context.font = "bold 26px 楷体";context.translate(x, y);context.rotate(deg);context.fillStyle = randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}for (var i = 0; i <= 5; i++) { //验证码上显示线条context.strokeStyle = randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);context.stroke();}for (var i = 0; i <= 30; i++) { //验证码上显示小点context.strokeStyle = randomColor();context.beginPath();var x = Math.random() * canvas_width;var y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}//为了测试方便不用每次都输入验证码//$("#checkCodeYZM").val(show_num.join(""));}
</script>

验证码效果(点击图片验证码可刷新)：