影片直播原始碼，前端canvas動態驗證碼實現

影片直播原始碼，前端canvas動態驗證碼實現

 // 生成一個隨機數
    const randomNum = (min: number, max: number) => {
        return Math.floor(Math.random() * (max - min) + min)
    }
    // 生成一個隨機的顏色
    const randomColor = (min: number, max: number) => {
        const r = randomNum(min, max)
        const g = randomNum(min, max)
        const b = randomNum(min, max)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
    //canvas圖片重新整理
    const initCode = () => {
        const len = 4
        const codeList: [] = []
        const chars: string = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
        const charsLen: number = chars.length
        for (let i = 0; i < len; i++) {
            codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)))
        }
        const identifyCode = codeList.join('')
        console.log(identifyCode)
        form.sureCode = identifyCode
        //繪製圖片
        const canvas: HTMLElement | null | any = document.getElementById('cancasCode')
        //畫布
        const ctx = canvas.getContext('2d')
        ctx.textBaseline = 'bottom'
        //隨機背景色
        ctx.fillStyle = randomColor(0, 255)
        //繪製矩形的長框(
        //    x矩形左上角的 x 座標。
        //    y矩形左上角的 y 座標。
        //    width矩形的寬度，以畫素計。
        //    height矩形的高度，以畫素計。
        //   )
        ctx.fillRect(0, 0, 100, 40)
        //繪製文字
        for (let i = 0; i < identifyCode.length; i++) {
            //文字顏色
            ctx.fillStyle = randomColor(0, 255)
            // 文字大小
            ctx.font = randomNum(12, 30) + 'px SimHei'
            const x = (i + 1) * (100 / (identifyCode.length + 1))
            const y = randomNum(30, 35)
            var deg = randomNum(-45, 45)
            //修改座標原點與角度
            ctx.translate(x, y)
            ctx.rotate(deg * (Math.PI / 180))
            ctx.fillText(identifyCode[i], 0, 0)
            //恢復座標原點
            ctx.rotate(-deg * (Math.PI / 180))
            ctx.translate(-x, -y)
        }
    }

以上就是影片直播原始碼，前端canvas動態驗證碼實現， 更多內容歡迎關注之後的文章