標籤：cti html begin dom 控制 需要 element document htm
我們在做開發的時候會經常涉及到驗證碼，前端的驗證碼需要用到HTML5中的canvas的知識點，然後再結合js來控制驗證數字就可以達到驗證碼的效果了.
結構與樣式：
1 <style>2 #mycanvas{3 cursor: pointer;/*游標為手型*/4 }5 </style>6 </head>7 <body>8 <canvas id="mycanvas" width=‘500‘ height=‘100‘></canvas>
js代碼：
/*產生4位隨機數*/ function rand(){ var str="abcdefghijklmnopqrstuvwxyz0123456789"; var arr=str.split(""); var validate=""; var ranNum; for(var i=0;i<5;i++){ ranNum=Math.floor(Math.random()*36); //隨機數在[0,35]之間 validate+=arr[ranNum]; } return validate; } /*幹擾線的隨機x座標值*/ function lineX(){ var ranLineX=Math.floor(Math.random()*90); return ranLineX; } /*幹擾線的隨機y座標值*/ function lineY(){ var ranLineY=Math.floor(Math.random()*40); return ranLineY; } function clickChange(){ var mycanvas=document.getElementById(‘mycanvas‘); var cxt=mycanvas.getContext(‘2d‘); cxt.fillStyle=‘#000‘; cxt.fillRect(0,0,90,40); /*產生幹擾線20條*/ for(var j=0;j<20;j++){ cxt.strokeStyle=‘#fff‘; cxt.beginPath(); //若省略beginPath，則每點擊一次驗證碼會累積幹擾線的條數 cxt.moveTo(lineX(),lineY()); cxt.lineTo(lineX(),lineY()); cxt.lineWidth=0.5; cxt.closePath(); cxt.stroke(); } cxt.fillStyle=‘red‘; cxt.font=‘bold 20px Arial‘; cxt.fillText(rand(),25,25); //把rand()產生的隨機數文本填充到canvas中 } /*點擊驗證碼更換*/ clickChange(); mycanvas.onclick=function(e){ e.preventDefault(); //阻止滑鼠點擊發生預設的行為 clickChange(); };
：
大功告成，假如你不喜歡背景顏色或者線條的顏色可以稍微更改。
使用canvas及js簡單產生驗證碼方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
