canvas画随机的四位验证码

效果图如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>验证码</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>

<script>
    class IdentifyCode {
        constructor(canvasId, width, height) {
            this.canvas = document.querySelector(`#${canvasId}`);
            this.ctx = this.canvas.getContext("2d");
            this.canvas.width = width;
            this.canvas.height = height;
            this.arrRange = [];
            this.code = "";
            this.range();
            this.buildCode();
            this.drawBakcGround();
            this.drawInterferingline();
            this.drawInterferencePoint();
            this.drawWord();
        }
        //生成一个随机数

        randomNum(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        //生成随机颜色
        randomColor(min, max) {
            var r = this.randomNum(min, max);
            var g = this.randomNum(min, max);
            var b = this.randomNum(min, max);
            return `rgb(${r},${g},${b})`
        }
        //生成字母和数字
        range() {
            this.arrRange = [];
            //0-9
            for (let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
                this.arrRange.push(String.fromCharCode(i))
            }
            //A-Z
            for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
                this.arrRange.push(String.fromCharCode(i));
            }
            //a-z
            for (let i = "a".charCodeAt(0); i < "z".charCodeAt(0); i++) {
                this.arrRange.push(String.fromCharCode(i))
            }
        }

        //生成四位随机码
        buildCode() {
            var code = "";
            for (let i = 0; i < 4; i++) {
                code += this.arrRange[Math.floor(Math.random() * this.arrRange.length)]
            }
            this.code = code;
        }

        //画背景
        drawBakcGround() {
            this.ctx.fillStyle = this.randomColor(180, 230);
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
            this.ctx.fill()
        }
        //写字
        drawWord() {
            var bothSide = 15;//两边间距
            var letterSpace = (this.canvas.width - 2 * bothSide) / 4;
            for (var i = 0; i < 4; i++) {
                this.ctx.font = `${this.randomNum(this.canvas.width / 4, this.canvas.width / 2)}px 黑体`;
                this.ctx.fillStyle = this.randomColor(80, 150);
                this.ctx.save();
                this.ctx.translate(bothSide + letterSpace * i, this.canvas.height / 2)
                this.ctx.rotate(Math.random() * (Math.PI / 6) * (-1) ** (Math.round(Math.random())));
                this.ctx.textBaseline = "middle";
                this.ctx.fillText(this.code[i], 0, 0);
                this.ctx.restore();
            }

        }
        //画干扰线
        drawInterferingline() {
            for (var i = 0; i < 6; i++) {
                this.ctx.beginPath();
                this.ctx.moveTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));
                this.ctx.lineTo(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height));
                this.ctx.closePath();
                this.ctx.strokeStyle = this.randomColor(180, 230);
                this.ctx.lineWidth = Math.ceil(Math.random() * 2);
                this.ctx.stroke();
            }
        }
        //画干扰点
        drawInterferencePoint() {
            var r = 1;
            var num = 40;
            for (var i = 0; i < Math.floor(num); i++) {
                this.ctx.beginPath();
                this.ctx.fillStyle = this.randomColor(150, 200);
                console.log(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)
                this.ctx.arc(this.randomNum(0, this.canvas.width), this.randomNum(0, this.canvas.height), r, 0, 2 * Math.PI, true)
                this.ctx.fill();
                this.ctx.closePath();
            }
        }
        //更换验证码
        update() {
            this.clear();
            this.range();
            this.buildCode();
            this.drawBakcGround();
            this.drawInterferingline();
            this.drawInterferencePoint();
            this.drawWord();
        }

        //清除
        clear() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        }
    }

    var identifyCode = new IdentifyCode("canvas", 100, 40);


    document.querySelector("#canvas").onclick = function () {
        identifyCode.update()
    }
</script>
原文地址：https://www.cnblogs.com/jiajiamiao/p/11737562.html