CanvasでCAPTCHA 画像認証
HTML5のCanvasでブラウザ上にCAPTCHA 画像認証を生成
（なんとなく思いつきで）画像認証をHTML5 Canvasで。
jQuery
$(function () {
var arg = {};
$(document).ready(function () {
arg['id'] = 'canvas';
draw(arg);
});
function draw(arg) {
var ctx = $('#' + arg['id'])[0].getContext('2d');
// 動的に生成
ctx.font = 'Italic 32px sans-serif';
ctx.fillStyle = '#666';
ctx.scale(1, 1.2);
ctx.fillText('D', 0, 60);
(略)
ctx.font = 'Italic 28px sans-serif';
ctx.fillStyle = '#000';
ctx.scale(1, 0.9);
ctx.scale(1, 1.1);
ctx.fillText('j', 536, 113);
}
});
HTML
<canvas id="canvas" width="450" height="150"></canvas>
小文字oと大文字Oと数字0など、画像認証において紛らわしいものはどれか1つにするか、使わない。
（サンプルでは小文字oのみ、その他紛らわしい文字はアルファベットの小文字のみに限定）
サンプル
連続で描画したときのX座標の動きが完全に把握しきれていないので、動的に生成する部分のソースは非公開で。
