How to generate CAPTCHA through Html5

This article mainly introduces how to generate CAPTCHA through Html5 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to generate CAPTCHA through Html5, let's take a look at it.

Use the canvas tag of Html5 to generate the canvas, and draw the CAPTCHA on the canvas using randomly generated numbers. The background is randomly generated colors and messy lines and dots.

Advanced: using the form plug-in property to bind CAPTCHA data (json) can be used for background data acquisition and checking during sending or asynchronous communication.

Code block:

Verification code # canvas {cursor:pointer;} / / generate random number function randomNum (min,max) {return Math.floor (Math.random () * (max-min) + min);} / / generate random color RGB component function randomColor (min,max) {var _ r = randomNum (min,max); var _ g = randomNum (min,max) Var _ b = randomNum (min,max); return "rgb (" + _ r + "," + _ g + "," + _ b + ");} / / stop the default click on the canvas before executing the drawPic () method document.getElementById (" canvas "). Onclick = function (e) {e.preventDefault (); drawPic ();} Function drawPic () {/ / get the element canvas var $canvas = document.getElementById ("canvas"); var _ str = "0123456789"; / / set the random number library var _ picTxt = ""; / / Random number var _ num = 4 var amp 4 random digits var _ width = $canvas.width; var _ height = $canvas.height; var ctx = $canvas.getContext ("2d") / / get context object ctx.textBaseline = "bottom"; / / text top-to-bottom alignment-bottom alignment ctx.fillStyle = randomColor (180240); / / fill canvas color ctx.fillRect (0memo); / / fill rectangle-draw for (var item0; I)