使用js做带干扰点的验证码

最新推荐文章于 2021-10-13 18:02:44 发布

付勇智

最新推荐文章于 2021-10-13 18:02:44 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/qq_43143992/article/details/83718042

版权

代码如下
<body onload="drawCoda()">
   <canvas id="mycanvas" onclick="drawCoda()"></canvas>
   <script type="text/javascript">
      function drawCoda(){
      	var c=document.getElementById('mycanvas');
      	var w=80;
      	var h=30;
      	c.width=80;
      	c.height=30;
      	c.style.border="1px solid balck"; 
            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<=100;i++){
                   r=Math.floor(Math.random()*255);
              g=Math.floor(Math.random()*255);
                   b=Math.floor(Math.random()*255);
                  x=Math.floor(Math.random()*w);
                  y=Math.floor(Math.random()*h);
      		context.fillStyle="rgb("+r+','+g+','+b+")";
      		context.beginPath();
      		context.arc(x,y,1,0,2*Math.PI);
      		context.fill();
      	}
      }
   </script>
</body>