登录验证码（前端）

最新推荐文章于 2024-08-19 09:29:46 发布

0&1菜菜

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量384

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/Caiabcd/article/details/118960964

版权

笔记专栏收录该内容

55 篇文章 1 订阅

订阅专栏

html

<canvas id="randomCode" width="120" height="50" style="border:1px solid #bbbbbb;cursor: pointer;" title="点击更换验证码">
</canvas>

 function randomStr(canvasId){
     var c=document.getElementById(canvasId);
     var w=c.offsetWidth;
     var h=c.offsetHeight;
     var randomCodes = '' ;
     var ctx=c.getContext('2d');
     ctx.clearRect(0,0,120,50);    //先清除canvas画布
     //绘制矩形
     ctx.fillStyle=randColor(170,250);
     ctx.fillRect(0,0,120,50);
     // 绘制验证码
     var Letter="ABCDEFGHIJKLMNOPQRSTUVWHYZ1234567890";
     for(var i=0;i<4;i++){
         var char=Letter[Math.floor(Math.random()*Letter.length)];
         randomCodes += char ;
         var fs=randNum(35,60);//字体的大小
         var deg=randNum(-30,30);//字体的旋转角度
         ctx.font=fs+'px Simhei';
         ctx.textBaseline="top";
         ctx.fillStyle=randColor(60,160);
         ctx.save();
         ctx.translate(30*i+15,15);
         ctx.rotate(deg*Math.PI/180);
         ctx.fillText(char,-15+5,-15);
         ctx.restore();
     }
     // 绘制干扰线
     for(var q=0;q<6;q++){
         ctx.beginPath();
         ctx.lineWidth="1";
         ctx.strokeStyle=randColor(60,160); // Green path
         ctx.moveTo(randNum(0,w),randNum(0,h));
         ctx.lineTo(randNum(0,w),randNum(0,h));
         ctx.stroke(); // Draw it
     }
     return randomCodes ;
 }
 //随机颜色
 function randColor(min,max){
     var r=Math.floor(Math.random()*(max-min+1)+min);
     var g=Math.floor(Math.random()*(max-min+1)+min);
     var b=Math.floor(Math.random()*(max-min+1)+min);
     return 'rgb('+r+','+g+','+b+')';
 }
 //随机数方法
 function randNum(min,max){
     var num=Math.floor(Math.random()*(max-min+1)+min);
     return num;
 }
 var randomCodes = randomStr("randomCode");
 console.log(randomCodes) ;
 document.getElementById("randomCode").onclick = function(){
     randomCodes = randomStr("randomCode");
     console.log(randomCodes) ;
 } ;