あっきーパパが Google の新しい CATCHA の論文を紹介してたので
脊髄反射で作ってみた
(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]'); }