Native JavaScript makes canvas verification code

<canvas id="Canvas"Width=" -"height=" +"></canvas> <a href="#"Id="changeimg"> can not see Clearly, change a </a> <script>/** Generate a random number **/function randomnum (min, max) {returnMath.floor (Math.random () * (max-min) +min); }            /** Generate a random color **/function Randomcolor (min, max) {varR =randomnum (min, max); varg =randomnum (min, max); varb =randomnum (min, max); return "RGB ("+ R +","+ G +","+ B +")";            } drawpic (); document.getElementById ("changeimg"). onclick =function (e) {e.preventdefault ();            Drawpic (); }            /** Draw Verification code picture **/function Drawpic () {varCanvas = document.getElementById ("Canvas"); varwidth =Canvas.width; varHeight =Canvas.height; varCTX = Canvas.getcontext ('2d'); Ctx.textbaseline='Bottom';//Text Alignment                /** Draw background color **/Ctx.fillstyle= Randomcolor ( the, -);//if the color is too deep, it may cause the eyes to be unclearCtx.fillrect (0,0, width, height); /** Draw Text **/                varstr ='ABCEFGHIJKLMNOPQRSTUVWXYZ123456789';  for(vari =0; I <4; i++) {                    vartxt = str[randomnum (0, Str.length)]; Ctx.fillstyle= Randomcolor ( -, the);//randomly generated font colorCtx.font = Randomnum ( -, -) +'px Simhei';//randomly generated font size                    varx =Ten+ I * -; vary = Randomnum ( -, $); vardeg = Randomnum (- $, $); //modify coordinate origin and rotation anglectx.translate (x, y); Ctx.rotate (deg* Math.PI/ the); Ctx.filltext (TXT,0,0); //restore coordinate origin and rotation angleCtx.rotate (-DEG * Math.PI/ the); Ctx.translate (-X,-y); }                /** Draw Interference lines **/                 for(vari =0; I <8; i++) {Ctx.strokestyle= Randomcolor ( +, the);                    Ctx.beginpath (); Ctx.moveto (Randomnum (0, width), randomnum (0, height)); Ctx.lineto (Randomnum (0, width), randomnum (0, height));                Ctx.stroke (); }                /** Draw interference points **/                 for(vari =0; I < -; i++) {Ctx.fillstyle= Randomcolor (0,255);                    Ctx.beginpath (); Ctx.arc (Randomnum (0, width), randomnum (0, height),1,0,2*Math.PI);                Ctx.fill (); }            }        </script>

Internet is a lot of plug-ins, I hope this is useful for you. Thank you.

Native JavaScript makes canvas verification code