脚本宝典收集整理的这篇文章主要介绍了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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的jquery canvas绘制图片验证码实例全部内容，希望文章能够帮你解决jquery canvas绘制图片验证码实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。