jQuery キャンバスで画像検証コード例を描画する

.識別コード{
    位置: 絶対;
    右: 6px;
    上位: 50%;
    幅: 118ピクセル;
    高さ: 40px;
    マージン: -21px 0 0 0;
}

<span id="コード" class="識別コード">
  <canvas class="show-captcha" id="canvas" style="幅: 100%; 高さ: 100%;"></canvas>
</span>

/**検証コードの画像を描画する**/
関数drawPic() {
    var キャンバス = document.getElementById("キャンバス");
    var 幅 = キャンバス.幅;
    var 高さ = キャンバスの高さ;
    //キャンバスの 2D 描画環境を取得します。var ctx = canvas.getContext('2d'); 
    ctx.textBaseline = '下';
    /**背景色を描画する**/
    ctx.fillStyle = ランダムカラー(180, 240);
    //色が暗すぎると鮮明でない場合があります ctx.fillRect(0,0,width,height);
    /**テキストを描画する**/
    var str ='ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var コード="";
    //4つの検証コードを生成する for(var i = 1;i <= 4; i++) {
        var txt = str[randomNum(0,str.length)];
        コード=コード+txt;
        ctx.fillStyle = ランダムカラー(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);
    }
        
    /**干渉線を描く**/
    (var i=0;i<3;i++) の場合 {
        ctx.strokeStyle = ランダムカラー(40, 180);
        ctx.beginPath();
        ctx.moveTo(ランダム数値(0,幅/2), ランダム数値(0,高さ/2));
        ctx.lineTo(ランダム数値(0,幅/2), ランダム数値(0,高さ));
        ctx.stroke();
    }
    /**干渉点を描画する**/
    (var i=0;i <50;i++) の場合 {
        ctx.fillStyle = ランダムカラー(255);
        ctx.beginPath();
        ctx.arc(randomNum(0, 幅), randomNum(0, 高さ),1,0,2* Math.PI);
        ctx.fill();
    }
    戻りコード;
}
/**乱数を生成する**/
関数 randomNum(最小値, 最大値) {
    Math.floor(Math.random() * (max - min) + min) を返します。
}
/**ランダムな色を生成する**/
関数 randomColor(最小値, 最大値) {
    var r = randomNum(最小値, 最大値);
    var g = randomNum(最小値, 最大値);
    var b = randomNum(最小値, 最大値);
    "rgb(" + r + "," + g + "," + b + ")" を返します。
}

$("#code").unbind('click').click(function(e){
    e.preventDefault();
    コードを作成します。
});
//検証コードを生成する function createCode(){
  検証コードエラーカウント = 0;
  ランダムコード = drawPic();
  ランダムコードを返します。
}