本文例項為大家分享了 canvas繪製圖片驗證碼的具體程式碼，供大家參考，具體內容如下

.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>

/**繪製驗證碼圖片**/
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,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,www.cppcns.com
 
160);
        //隨機生成字型顏色
        ctx.font = randomNum(90,110) +'px SimHei';
   tyxZsBa     //隨機生成字型www.cppcns.com大小
        var x = 10 + i * 50;
        var y = randomNum(100,135);
        var deg = randomNum(-30,30);
        //修改座標原點和旋轉tyxZsBa角度
        ctx.translate(x,y); 
        ctx.rotate(deg * Math.PI /180); 
        ctx.fillText(txt,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,randomNuwww.cppcns.com
 
m(0,height));
        ctx.stroke();
    }
    /**繪製干擾點**/
    for(var i=0;i <50;i++) {
        ctx.fillStyle = randomColor(255);
        ctx.beginPath();
        ctx.arc(randomNum(0,width),height),1,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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。