本文实例为大家分享了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;
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Bootstrap5的断点怎么理解，容器是用来做什么的

  本文将结合实例代码，介绍Bootstrap5的断点与容器的具体使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧

• React Fragment的作用和用法是什么

  本文主要介绍了React Fragment介绍与使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue列表滚动时固定表头或最左列的效果怎样做

  在移动端开发中，会用到列表作为信息展示方式，一般希望上下滚动时，可以固定表头，左右滚动时，可以固定最左列。

• JS中round()方法的作用是什么，语法如何写

  在JavaScript中，round()方法的意思是将数字进行四舍五入计算，该方法可以把一个数字舍入为最接近的整数，返回的结果就是四舍五入后的结果，语法为“Math.round(数字)”。

• JavaScript执行上下文是什么意思？一文带你看懂

  这篇文章主要给大家分享的是关于JavaScript执行上下文的内容，一些朋友可能对于JavaScript执行上下文不是很了解，对此这篇文章就给大家来介绍一下JavaScript执行上下文机JavaScript执行上下文栈，感兴趣的朋友就继续往下看吧。