IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

JavaScript でくるくる CAPTCHA を実装してみる

脊髄反射で作ってみた


(UI の部分だけですが;;;)
http://amachang.sakura.ne.jp/misc/kurukuru/IE では動きません)
jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。

(追記)せっかくなのでソースコードの解説

// 初期値の設定
// prev_value は最後に設定された値の保持用 last_value のほうが良かったかも
var start_value = Math.PI, prev_value = start_value;

// 回転用イメージオブジェクト
var img = new Image;

// img.src が設定されてイメージ読み込まれたら、 onload が呼び出される
img.onload = function() {

    // canvas のコンテキスト(お絵描きオブジェクト)を取得
    var ctx = $('#canvas').get(0).getContext('2d');

    // 原点を座標 (200, 200) に移動
    ctx.translate(200, 200);

    // 初期値を表示(とくにここでやる必要もないな)
    debug(start_value);

    // img を全画面ではり付け(キャンバスのサイズが 400x400 なので)
    ctx.drawImage(img, -200, -200, 400, 400);

    // id="slider" の要素をスライダーにする
    $('#slider').slider({

        // スライダーのステップ幅
        step: (Math.PI * 2 / 100),

        // スライダーの左端の値
        min: 0,

        // スライダーの右端の値
        max: Math.PI * 2,

        // スライダーのカーソルの位置
        value: start_value,

        // スライドした時に呼び出される関数
        slide: function(e, u) {

            // 値の表示
            debug(u.value);

            // キャンバスのクリア
            ctx.clearRect(-200, -200, 400, 400);

            // 座標を回転
            ctx.rotate(u.value - prev_value);

            // img 全前画面ではり付け
            ctx.drawImage(img, -200, -200, 400, 400);

            // 値の保存
            prev_value = u.value;
        }
    });
};

// img.src の設定。画像が読み込まれると onload が発生
img.src = 'fx.png';

// デバッグ用に値表示
function debug(value) { $('#value').text(value + '[rad]'); }

追記2:スライドバーじゃなくて直接回したい人はこちら

JavaScriptでくるくるCAPCHA alt.ver - 猫とC#について書くmatarilloの雑記