canvas生成验证码，附有验证功能（全大或小写字母和生成的验证码验证）。

这是css样式和html

	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            display: flex;
            height: 30px;
            width: 250px;
            margin-top: 10px;
            border: 1px solid skyblue;
            box-sizing: border-box;
        }

        .small input {
            width: 160px;
            height: 100%;
            line-height: 30px;
            padding-left: 5px;
            outline: none;
            border: none;
        }

        .small button {
            flex-grow: 1;
            height: 100%;
            line-height: 30px;
            text-align: center;
            border: none;
            outline: none;
            border-left: 1px solid rgb(135, 206, 235);
        }

        .small button:hover {
            background-color: rgb(135, 206, 235);
        }
    </style>
    <div style="width: 500px;margin: 20px auto;">
        <canvas id="canvas"></canvas>
        <button id="btn" onclick="shuaxin()">点击换一张</button>
        <div class="small">
            <input class="inp" type="text">

            <button onclick="yanzheng()">验证码验证</button>
        </div>
    </div>

这里是js

		var inp = document.querySelector(".inp");
        var canvas = document.getElementById("canvas");//获取到canvas对象！
        var context = canvas.getContext("2d");//获取到canvas的绘图环境！
        canvas.width = 200;//设置canvas宽度
        canvas.height = 40;//设置canvas高度
        context.font = "bold 20px 微软雅黑";//设置字体
        context.strokeRect(0, 0, 200, 40);//绘制一个矩形框
        var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

        getNewValidate();  //页面加载先调用

        function shuaxin() {
            getNewValidate();
        };

        // 生成验证码
        function getNewValidate() {
            context.clearRect(0, 0, 200, 40);//清除画布
            getValidate(6);//生成一个六位数的验证码
            drawPoint(100);//画100个干扰点
            drawLine(8);//画8条干扰线
        };

        // 验证验证码
        var before;
        var lowerCase;
        var upperCase;
        function yanzheng() {
            if (inp.value === before || inp.value === lowerCase || inp.value === upperCase) {
                alert("验证成功");
                inp.value="";
            } else {
                alert("验证失败");
                inp.value="";
            }
        }
        // 生成n位的验证码
        function getValidate(n) {
            var str = "";
            for (var i = 0; i < n; i++) {
                var x = 20 + i * 20;
                var y = 20 + Math.random() * 10;
                var index = Math.floor(Math.random() * aCode.length);//获取到随机的索引值
                var txt = aCode[index];//获取到随机的内容
                context.fillStyle = getColor();//设置字体颜色
                context.translate(x, y);//字体移动
                var deg = 90 * Math.random() * Math.PI / 180;
                context.rotate(deg);//字体随机旋转度数
                context.fillText(txt, 0, 0);//将文字写到canvas上面
                context.rotate(-deg);
                context.translate(-x, -y);
                str += txt;
            }
            before = str;
            lowerCase = str.toLowerCase();
            upperCase = str.toUpperCase();
        }
        // 画X个干扰点
        function drawPoint(X) {
            for (var i = 0; i < X; i++) {
                context.beginPath();
                var x = Math.random() * 200;
                var y = Math.random() * 40;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.strokeStyle = getColor();
                context.stroke();//开始绘制
            }
        }
        // 画m条干扰线
        function drawLine(m) {
            for (var i = 0; i < m; i++) {
                context.beginPath(); //开始一个路径
                context.moveTo(Math.random() * 200, Math.random() * 40);//设置起点坐标
                context.lineTo(Math.random() * 200, Math.random() * 40);//设置终点坐标
                context.strokeStyle = getColor();
                context.stroke();//开始绘制
            }
        }
        // 验证码随机生成颜色值
        function rnd(max, min = 0) {
            return Math.round(Math.random() * (max - min)) + min
        }
        function getColor() {
            let str = '0123456789ABCDEF';
            let color = ['#'];
            for (let i = 0; i < 6; i++) {
                color.push(str[rnd(str.length - 1)])
            }
            return color.join('')
        }

效果图如下：