jquery使用canvas標簽繪制驗證碼
<canvas> 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為,但卻把一個繪圖 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ū)分大小寫)"> <canvas id="c1" width="100" height="30"style='border:1px solid black'></canvas> <button id="btn">提交</button> </div>
JavaScript:
$(function(){ //存放隨機的驗證碼 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('驗證碼錯誤') draw(showNum) } }) //封裝一個隨機驗證碼繪制畫布的函數(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 清空的起始坐標 //矩形的寬度和高度 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) //隨機一個字符 var txt = arrCode[index] showNum[i]=txt.toLowerCase() //開始控制字符的繪制位置 var x=10+20*i//每一個驗證碼繪制的起始點的x坐標 var y=20+Math.random()*8//起始點y坐標 ctx.font='bold 20px 微軟雅黑' //開始旋轉(zhuǎn)字符 var deg = Math.random()-0.5 //canvas想實現(xiàn)繪制內(nèi)容具有傾斜效果,必須先平移 //為了把旋轉(zhuǎn)點移動到繪制內(nèi)容的地方 ctx.translate(x,y) ctx.rotate(deg) //設(shè)置繪制的顏色隨機的顏色 ctx.fillStyle=randomColor() ctx.fillText(txt,0,0) //把canvas復原 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() } //繪制點 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)這個效果
如果單擊canvas標簽會更換一張圖片
輸入之后如果正確會彈出"輸入正確"的提示框
錯誤會提示"輸入錯誤"并且點擊確定后會更換一張驗證碼框
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-05-05Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏
這篇文章主要與大家分享Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏的具體實現(xiàn),喜歡的朋友可以參考下2014-09-09jQuery實現(xiàn)的網(wǎng)站banner圖片無縫輪播效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)站banner圖片無縫輪播效果,結(jié)合完整實例形式分析了jQuery結(jié)合時間函數(shù)實現(xiàn)圖片定時輪播切換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01