canvans 随机验证码

	let show_num = []
    function draw(show_num) {
        let doc = document;
        let canvas = doc.getElementById("canvas");
        let context = canvas.getContext("2d");
        // 屏幕宽度
        let clientWidth = document.documentElement.clientWidth;
        // canvas宽度
        let canvasWidth = Math.floor(canvas.width);
        // let canvasWidth = Math.floor(clientWidth * 100 / 1920);
        // canvas高度
        let canvasHeight = Math.floor(canvas.height);
        // let canvasHeight = Math.floor(clientWidth * 47 / 1920);
        // 设置宽高
        canvas.setAttribute('width', canvasWidth + 'px');
        canvas.setAttribute('height', canvasHeight + 'px');
        // 画布内容
        let sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        let aCode = sCode.split(",");
        let aLength = aCode.length; //获取到数组的长度
        // 验证码
        let num = 4
        for (let i = 0; i < num; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
            let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
            // let deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            let deg = Math.random() - 0.5; //产生一个随机弧度
            let txt = aCode[j]; //得到随机的一个内容
            this.show_num[i] = txt.toLowerCase();
            // 字体间隙
            let fontInterval = canvasWidth / num;
            // 字体高度
            let fontLineHeight = canvasHeight / 2;
            // 文字在canvas上的x坐标i:为第几个字体* 间隙 + 文字居中(间隙/2) 
            let x = i * fontInterval + (fontInterval / 2); //文字在canvas上的x坐标
            // 文字在canvas上的y坐标
            let y = fontLineHeight;
            // 字体大小
            let textPx = canvasHeight / 2.5;
            context.font = "bold " + textPx + "px" + " 微软雅黑";

            context.translate(x, y);
            context.textBaseline = 'middle';
            context.textAlign = 'center';
            context.rotate(deg);
            context.fillStyle = this.randomColor();
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);
        }
    }

    //得到随机的颜色值
    function randomColor() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }