验证码样式

show_num 是取得从后台返回的验证码4位 

html

<div class="picCode">
	<canvas id="canvas" width="128" height="50"></canvas>
</div>

js 

function show(show_num){
    var canvas_width=$("#canvas").width();
    var canvas_height=$("#canvas").height();
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=canvas_width;
    for(var i=0;i<show_num.length;i++){
        var deg=Math.randow()*30*Math.PI/180;
        var txt=show_num.charAt(i);
        var x=i*28+10;//文字在canvas上x坐标
        var y=Math.random()*10;//文字在canvas上y坐标
        
        context.font="bold 25px 微软雅黑";
        context.translate(x,y);
        context.rotate(deg);
        
        context.fillStyle=randowColor();
        context.fillText(text,0,0);

        context.rotate(-deg);
        context.translate(-x,-y);        
    }

    for(var i=0;i<=5;i++){
        //验证码上显示线条
        context.strokeStyle=randomColor();
        context.beginPath();
        context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
        context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
        context.stroke();
    }

    for(var i=0;i<=30;i++){
        //验证码上显示小点
        context.strokeStyle=randomColor();
        context.beginPath();
        var x=Math.random()*canvas_width;
        var y=Math.random()*canvas_height;
        context.moveTo(x,y);
        context.lineTo(x+1,y+1);
        context.stroke();
    }

},
function randomColor(){
    //得到随机的颜色值
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+","+g+","+b+")"
}

效果图如下