jquery canvas绘制图片验证码实例_jquery

这篇文章主要为大家详细介绍了jquery canvas绘制图片验证码实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery canvas绘制图片验证码的具体代码，供大家参考，具体内容如下

CSS

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

HTML

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

JS

/**绘制验证码图片**/
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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com