<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