快捷導(dǎo)航

jquery使用canvas標(biāo)簽繪制驗(yàn)證碼

更新時(shí)間：2021年10月29日 08:35:48 作者：Moonllback

這篇文章主要為大家詳細(xì)介紹了Jquery中用canvas標(biāo)簽繪制驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

<canvas> 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

代碼如下

css:

input{
            width: 200px;
            height: 32px;
            border: 1px solid #000;
            box-sizing: border-box ;
        }
        #c1{
             vertical-align: middle;
             box-sizing: border-box;
             cursor: pointer;
        }
        #btn{
            display: block;
            margin-top: 10px;
            height: 32px;
            font-size: 16px;
        }

html:

<div class="code">
        <input type="text" value="" id="inputValue" placeholder="請(qǐng)輸入驗(yàn)證碼(不區(qū)分大小寫)">
    <canvas id="c1" width="100" height="30"style='border:1px solid black'></canvas>
    <button id="btn">提交</button>    
   
</div>

JavaScript:

$(function(){
            //存放隨機(jī)的驗(yàn)證碼
            var showNum=[]
            draw(showNum)
            $('#c1').on('click',function(){
                draw(showNum)
            })
            $('#btn').on('click',function(){
                var s = $('#inputValue').val().toLowerCase()
                var s1 = showNum.join("")
                if(s==s1){
                    alert('提交成功')
                }else{
                    alert('驗(yàn)證碼錯(cuò)誤')
                    draw(showNum)
                }
            })
 
            //封裝一個(gè)隨機(jī)驗(yàn)證碼繪制畫布的函數(shù)
            function draw(showNum){
                //獲取canvas
                var canvas=  $('#c1')
                var ctx=canvas[0].getContext('2d')
 
                //獲取畫布的寬度和高度
                var canvas_width=canvas.width()
                var canvas_height=canvas.height()
 
                //清空之前繪制的內(nèi)容
                //0,0 清空的起始坐標(biāo)
                //矩形的寬度和高度
                ctx.clearRect(0,0,canvas_width,canvas_height)
 
                //開始繪制
                var scode='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,A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9'
                console.log("123");
                var arrCode=scode.split(',')
                console.log(arrCode);
                var arrLength =arrCode.length
                for(var i=0;i<4;i++){
                    var index=Math.floor(Math.random()*arrCode.length)
                    //隨機(jī)一個(gè)字符
                    var txt = arrCode[index]
                    showNum[i]=txt.toLowerCase()
 
                    //開始控制字符的繪制位置
                    var x=10+20*i//每一個(gè)驗(yàn)證碼繪制的起始點(diǎn)的x坐標(biāo)
                    var y=20+Math.random()*8//起始點(diǎn)y坐標(biāo)
                    
                    ctx.font='bold 20px 微軟雅黑' 
 
                    //開始旋轉(zhuǎn)字符
                    var deg = Math.random()-0.5
                    //canvas想實(shí)現(xiàn)繪制內(nèi)容具有傾斜效果,必須先平移
                    //為了把旋轉(zhuǎn)點(diǎn)移動(dòng)到繪制內(nèi)容的地方
                    ctx.translate(x,y)
                    ctx.rotate(deg)
                    //設(shè)置繪制的顏色隨機(jī)的顏色
                    ctx.fillStyle=randomColor()
                    ctx.fillText(txt,0,0)
                    //把canvas復(fù)原
                    ctx.rotate(-deg)
                    ctx.translate(-x,-y)
                    // ctx.stroke()
                }
                for(var i=0;i<=30;i++){
                    if(i<5){
                        //繪制線
                        ctx.strokeStyle=randomColor()
                        ctx.beginPath()
                        ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.stroke()
                    }
                    //繪制點(diǎn)
                    ctx.strokeStyle=randomColor()
                    ctx.beginPath()
                    x=Math.random()*canvas_width
                    y=Math.random()*canvas_height
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.stroke()
                }
 
 
            }
            function randomColor(){
                var r=Math.floor(Math.random()*256)
                var g=Math.floor(Math.random()*256)
                var b=Math.floor(Math.random()*256)
                return`rgb(${r},${g},$)`
            }
        })

能夠?qū)崿F(xiàn)這個(gè)效果