点击切换验证码
Posted wxyblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击切换验证码相关的知识,希望对你有一定的参考价值。
canvas 点击切换验证码
<canvas id="canvas" width="120px" height="40px"></canvas> <script> window.onload=function(){ var canvas=document.getElementById(‘canvas‘); var context = canvas.getContext(‘2d‘); draw(); canvas.onclick=function(){ context.clearRect(0,0,120,40); draw(); } function draw(){ context.strokeRect(0,0,120,40) var aCode = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘] //要随机产生的元素 for (let i = 0; i < 4; i++) { var x=20+i*20; var y = 20+ 10*Math.random(); var index = Math.floor(Math.random()*aCode.length) ;//数组下标 var txt = aCode[index];//1 3 5 0 context.font = ‘bold 20px‘; context.fillStyle = getColor();//颜色 随机 context.translate(x,y); var deg = 90 * Math.random()*Math.PI/180; context.rotate(deg); context.fillText(txt,0,0); context.rotate(-deg) context.translate(-x,-y) } //干扰点 for(var i=0; i<5;i++){ context.beginPath(); // var x = Math.random()*120; var y = Math.random()*40; //七点 context.moveTo(x,y); //终点 context.lineTo(x+1,x+1); context.strokeStyle = getColor() //绘制 context.stroke(); context.closePath() } //干扰点 for(var i=0; i<4;i++){ context.beginPath(); // var x = Math.random()*120; var y = Math.random()*40; //七点 context.moveTo( Math.random()*120, Math.random()*40); //终点 context.lineTo(Math.random()*120,Math.random()*40); context.strokeStyle = getColor() //绘制 context.stroke(); context.closePath() } } function getColor(){ var r = Math.floor(Math.random()*256) var g = Math.floor(Math.random()*256) var b = Math.floor(Math.random()*256) return ‘rgb(‘+r +‘,‘+g +‘,‘+b+‘)‘ } } </script>
..
以上是关于点击切换验证码的主要内容,如果未能解决你的问题,请参考以下文章