使用js做帶干擾線的驗證碼
阿新 • • 發佈：2018-12-19
程式碼如下
<body onLoad="drawCoda()"> <canvas id="mycanvas" onclick="drawCoda()"></canvas> <script type="text/javascript"> function lineX(){ var lineX=Math.floor(Math.random()*80); return lineX; } function lineY(){ var lineY=Math.floor(Math.random()*30); return lineY; } function drawCoda(){ var c=document.getElementById('mycanvas'); c.style.border="1px solid black"; c.width=80; c.height=30; r1=Math.floor(Math.random()*255); g1=Math.floor(Math.random()*255); b1=Math.floor(Math.random()*255); var context=c.getContext('2d'); context.fillStyle="#ccc"; context.fillRect(0,0,80,30); context.fillStyle="red"; var text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"; context.font="25px 黑體"; context.rotate(Math.random()*8*Math.PI/180) context.fillStyle="rgb("+r1+','+g1+','+b1+")"; context.fillText(text[Math.floor(Math.random()*text.length)],10,20); r2=Math.floor(Math.random()*255); g2=Math.floor(Math.random()*255); b2=Math.floor(Math.random()*255); context.font="25px 黑體"; context.rotate(Math.random()*8*Math.PI/180) context.fillStyle="rgb("+r2+','+g2+','+b2+")"; context.fillText(text[Math.floor(Math.random()*text.length)],25,20); r3=Math.floor(Math.random()*255); g3=Math.floor(Math.random()*255); b3=Math.floor(Math.random()*255); context.font="25px 黑體"; context.rotate(Math.random()*-8*Math.PI/180) context.fillStyle="rgb("+r3+','+g3+','+b3+")"; context.fillText(text[Math.floor(Math.random()*text.length)],40,20); r4=Math.floor(Math.random()*255); g4=Math.floor(Math.random()*255); b4=Math.floor(Math.random()*255); context.font="25px 黑體"; context.rotate(Math.random()*-8*Math.PI/180) context.fillStyle="rgb("+r4+','+g4+','+b4+")"; context.fillText(text[Math.floor(Math.random()*text.length)],55,20); for(var i=1;i<=20;i++){ r=Math.floor(Math.random()*255); g=Math.floor(Math.random()*255); b=Math.floor(Math.random()*255); context.beginPath(); context.strokeStyle="rgb("+r+','+g+','+b+")"; context.moveTo(lineX(),lineY()); context.lineTo(lineX(),lineY()); context.lineWidth=0.5; context.closePath(); context.stroke(); } } </script> </body>