Jquery制作图片验证码实例-canvas 绘制

.identify-code{ ???position: absolute; ???right: 6px; ???top: 50%; ???width: 118px; ???height: 40px; ???margin: -21px 0 0 0;}

<span id="code" class="identify-code">　　<canvas class="show-captcha" id="canvas" style="width: 100%; height: 100%;"></canvas></span>

/**绘制验证码图片**/function drawPic() { ???var canvas = document.getElementById("canvas"); ???var width = canvas.width; ???var height = canvas.height; ???//获取该canvas的2D绘图环境 ????var ctx = canvas.getContext(‘2d‘); ????ctx.textBaseline =‘bottom‘; ???/**绘制背景色**/ ???ctx.fillStyle = randomColor(180, 240); ???//颜色若太深可能导致看不清 ???ctx.fillRect(0,0,width,height); ???/**绘制文字**/ ???var str =‘ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy‘; ???var code=""; ???//生成四个验证码 ???for(var i = 1;i <= 4; i++) { ???????var txt = str[randomNum(0,str.length)]; ???????code=code+txt; ???????ctx.fillStyle = randomColor(50,160); ???????//随机生成字体颜色 ???????ctx.font = randomNum(90,110) +‘px SimHei‘; ???????//随机生成字体大小 ???????var x = 10 + i * 50; ???????var y = randomNum(100, 135); ???????var deg = randomNum(-30, 30); ???????//修改坐标原点和旋转角度 ???????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<3;i++) { ???????ctx.strokeStyle = randomColor(40, 180); ???????ctx.beginPath(); ???????ctx.moveTo(randomNum(0,width/2), randomNum(0,height/2)); ???????ctx.lineTo(randomNum(0,width/2), randomNum(0,height)); ???????ctx.stroke(); ???} ???/**绘制干扰点**/ ???for(var i=0;i <50;i++) { ???????ctx.fillStyle = randomColor(255); ???????ctx.beginPath(); ???????ctx.arc(randomNum(0, width), randomNum(0, height),1,0,2* Math.PI); ???????ctx.fill(); ???} ???return code;}/**生成一个随机数**/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 + ")";}

$("#code").unbind(‘click‘).click(function(e){ ???e.preventDefault(); ???createCode();});
//生成验证码
function createCode(){
　　VerificationCodeErrCount = 0;
　　randomCode = drawPic();
　　return randomCode;
} ???????????