1 <!DOCTYPE>2 <HTML>3 <Body>4 <Canvaswidth= "$"Height= "The "></Canvas>5 <Script>6 varContext=document.getElementsByTagName ('Canvas')[0].getcontext ('2d');7 varwidth=Context.canvas.width;8 varHeight=Context.canvas.height;9 varLastx=width*math.random ();Ten varlasty=Height*math.random (); One varHue= 0; A functionLine () { - - Context.save (); the context.translate (Width/2, Height/2); - Context.scale (0.9, 0.9); - Context.translate (-width/2,-height/2); - + Context.beginpath (); - Context.linewidth= 5 +math.random ()*Ten; + Context.moveto (LASTX, lasty); A Lastx=width*math.random (); at lasty=Height*math.random (); - - Context.beziercurveto (Width*math.random (), Height*math.random (), Width*math.random (), Height*math.random (), lastx,lasty); - - Hue=Hue+ Ten *math.random (); - Context.strokestyle= 'HSL ('+Hue+', 50%,50%)'; in Context.shadowcolor= ' White'; - Context.shadowblur= Ten; to + Context.stroke (); - Context.restore (); the } * setinterval (line, -); $ functionbackground () {Panax Notoginseng Context.fillstyle= 'Rgba (0,0,0,0.1)'; - Context.fillrect (0,0, width, height) the + } A setinterval (Background, -) the </Script> + </Body> - </HTML>
Canvas's Fancy random curves
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
