基于html中canvas标签的验证码图片生成方法

基于html中canvas标签的验证码图片生成方法

小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下

<canvas id="canvas" width="120" height="40"></canvas>  <a href="#" id="changeImg">看不清，换一张</a>  <script>  /**生成一个随机数**/  function randomNum(min,max){    return Math.floor( Math.random()*(max-min)+min);  }  /**生成一个随机色**/  function randomColor(min,max){    var r = randomNum(min,max);    var g = randomNum(min,max);    var b = randomNum(min,max);    return "rgb("+r+","+g+","+b+")";  }  drawPic();  document.getElementById("changeImg").onclick = function(e){    e.preventDefault();    drawPic();  }  /**绘制验证码图片**/  function drawPic(){    var canvas=document.getElementById("canvas");    var width=canvas.width;    var height=canvas.height;    var ctx = canvas.getContext('2d');    ctx.textBaseline = 'bottom';    /**绘制背景色**/    ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清    ctx.fillRect(0,0,width,height);    /**绘制文字**/    var str = 'ABCEFGHJKLMNPQRSTWXY123456789';    for(var i=0; i<4; i++){      var txt = str[randomNum(0,str.length)];      ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色      ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小      var x = 10+i*25;      var y = randomNum(25,45);      var deg = randomNum(-45, 45);      //修改坐标原点和旋转角度      ctx.translate(x,y);      ctx.rotate(deg*Math.PI/180);      ctx.fillText(txt, 0,0);      //恢复坐标原点和旋转角度      ctx.rotate(-deg*Math.PI/180);      ctx.translate(-x,-y);    }    /**绘制干扰线**/    for(var i=0; i<8; i++){      ctx.strokeStyle = randomColor(40,180);      ctx.beginPath();      ctx.moveTo( randomNum(0,width), randomNum(0,height) );      ctx.lineTo( randomNum(0,width), randomNum(0,height) );      ctx.stroke();    }    /**绘制干扰点**/    for(var i=0; i<100; i++){      ctx.fillStyle = randomColor(0,255);      ctx.beginPath();      ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);      ctx.fill();    }  }  </script>

效果预览



其实代码也不多,也不难理解,或许有更好的方式,欢迎留言讨论