实现登录等通用验证码功能

Java代码：

//后台生成随机数
    @GetMapping("/randomNum")
    @ResponseBody
    public 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>

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