当前位置:Gxlcms > JavaScript > 如何使用canvas和js完成验证码的生成方法介绍

如何使用canvas和js完成验证码的生成方法介绍

时间:2021-07-01 10:21:17 帮助过:15人阅读

在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:
1.生成一张画布canvas
2.生成随机数验证码
3.在画布中生成干扰线
4.把验证码文本填充到画布中
5.点击画布更换验证码
结构与样式:
  1. <canvas id="mycanvas" width='90' height='40'>
  2. 您的浏览器不支持canvas,请换个浏览器试试~
  3. </canvas>
  4. <style>
  5. #mycanvas{
  6. cursor: pointer;
  7. }
  8. </style>

下面来编写js代码:
  1. /*生成4位随机数*/
  2. function rand(){
  3. var str="abcdefghijklmnopqrstuvwxyz0123456789";
  4. var arr=str.split("");
  5. var validate="";
  6. var ranNum;
  7. for(var i=0;i<4;i++){
  8. ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
  9. validate+=arr[ranNum];
  10. }
  11. return validate;
  12. }
  13. /*干扰线的随机x坐标值*/
  14. function lineX(){
  15. var ranLineX=Math.floor(Math.random()*90);
  16. return ranLineX;
  17. }
  18. /*干扰线的随机y坐标值*/
  19. function lineY(){
  20. var ranLineY=Math.floor(Math.random()*40);
  21. return ranLineY;
  22. }
  23. function clickChange(){
  24. var mycanvas=document.getElementById('mycanvas');
  25. var cxt=mycanvas.getContext('2d');
  26. cxt.fillStyle='#000';
  27. cxt.fillRect(0,0,90,40);
  28. /*生成干扰线20条*/
  29. for(var j=0;j<20;j++){
  30. cxt.strokeStyle='#fff';
  31. cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数
  32. cxt.moveTo(lineX(),lineY());
  33. cxt.lineTo(lineX(),lineY());
  34. cxt.lineWidth=0.5;
  35. cxt.closePath();
  36. cxt.stroke();
  37. }
  38. cxt.fillStyle='red';
  39. cxt.font='bold 20px Arial';
  40. cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中
  41. }
  42. clickChange();
  43. /*点击验证码更换*/
  44. mycanvas.onclick=function(e){
  45. e.preventDefault(); //阻止鼠标点击发生默认的行为
  46. clickChange();
  47. };

这样就写好一个较普通的验证码了,当然也有很多需要优化的地方,比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~

以上就是如何使用canvas和js完成验证码的生成方法介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行