趋势论----手绘验证码

首先推荐大家去这个作者的地址看看：

http://www.josscrowcroft.com/projects/motioncaptcha-jquery-plugin/

演示地址：

http://www.gbin1.com/technology/jquerynews/motioncaptchadrawshapes/demo.jsp

该功能甚是有趣且具有创意，用鼠标或者更多的是在触屏手机上利用绘画技术来绘制图形，此验证码的表达形式在以后或许会很流行

主要实现代码原理：

How To Use
Add the plugin scripts: (I’m using jQuery 1.6.x from the google API, but you could load it locally – and MotionCAPTCHA is supported down to jQuery 1.4):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>
Code the form as usual, with a unique ID (eg. ‘#mycoolform’) and set the form action to blank (or ‘#’) – eg:
<form action="#" id="mycoolform" method="[get/post]">
Add this placeholder <div> element to your form (NB. use <fieldset>s if you need it to validate) containing the blank canvas:
<div id="mc">
    <p>Please draw the shape in the box to submit the form:</p>
    <canvas id="mc-canvas"></canvas>
</div>
Disable the submit button, eg:
<input type="submit" disabled="disabled" value="Submit Form" />
Add a hidden input to the form, with the form action as its value. Give it either a unique id, or the id ‘mc-action’, like so:
<input type="hidden" id="fairly-unique-id" value="submitform.php" />
Call the plugin on the form element. If you used any other ID than ‘mc-action’ for the hidden input, you’ll just need to pass it to the plugin, like this:
$('#form-id').motioncaptcha({
    action: '#fairly-unique-id'
});



// Or, if you just used 'mc-action' as the hidden input's ID:
$('#form-id').motioncaptcha();
Other options are available (defaults are shown):
$('#form-id').motioncaptcha({
    // Basics:
    action: '#mc-action',        // the ID of the input containing the form action
    divId: '#mc',                // if you use an ID other than '#mc' for the placeholder, pass it in here
    cssClass: '.mc-active',      // this CSS class is applied to the 'mc' div when the plugin is active
    canvasId: '#mc-canvas',      // the ID of the MotionCAPTCHA canvas element

    // An array of shape names that you want MotionCAPTCHA to use:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // These messages are displayed inside the canvas after a user finishes drawing:
    errorMsg: 'Please try again.',
    successMsg: 'Captcha passed!',

    // This message is displayed if the user's browser doesn't support canvas:
    noCanvasMsg: "Your browser doesn't support <canvas> - try Chrome, FF4, Safari or IE9."

    // This could be any HTML string (eg. '<label>Draw this shit yo:</label>'):
    label: '<p>Please draw the shape in the box to submit the form:</p>'
});

具体大家去官网看看吧，这里只是觉得HTML5和jquery结合起来将是一场艺术效果和完美体验的合集！