Reference: Https://github.com/cyclegtx/wave_background
Do the water background, may be used in the future ha!
The effect is as follows:
The code is as follows:
<!DOCTYPE HTML><HTML><Head> <title>Wave background</title> <MetaCharSet= "Utf-8" /> <style>html, Body{width:100%;Height:100%;padding:0;margin:0;} </style></Head><Body> <CanvasID= "Canvas"style= "position:absolute;top:0px;left:0px;z-index:1;"></Canvas> <Scripttype= "Text/javascript"> varCanvas=document.getElementById ('Canvas'); varCTX=Canvas.getcontext ('2d'); Canvas.width=Canvas.parentNode.offsetWidth; Canvas.height=Canvas.parentNode.offsetHeight; //if the browser supports requestanimframe use requestanimframe otherwise use settimeoutWindow.requestanimframe= (function(){ returnWindow.requestanimationframe||Window.webkitrequestanimationframe||Window.mozrequestanimationframe|| function(callback) {Window.settimeout (callback, + / -); }; })(); //Wave size varBoheight=Canvas.height/ Ten; varPosheight=Canvas.height/ 1.2; //Initial angle of 0 varStep= 0; //defines the color of three different waves varLines= ["Rgba (0,222,255, 0.2)", "Rgba (157,192,249, 0.2)", "Rgba (0,168,255, 0.2)"]; functionLoop () {Ctx.clearrect (0,0, Canvas.width,canvas.height); Step++; //draw a rectangle of 3 different colors for(varJ=Lines.length- 1; J>= 0; J--) {Ctx.fillstyle=Lines[j]; //each rectangle has a different angle, with a 45 degree difference between each varAngle=(Step+J* -)*Math.PI/180; varDeltaheight=Math.sin (angle)*Boheight; varDeltaheightright=Math.Cos (angle)*Boheight; Ctx.beginpath (); Ctx.moveto (0, Posheight+deltaheight); Ctx.beziercurveto (Canvas.width/2, Posheight+deltaheight-boheight, Canvas.width/ 2, Posheight+Deltaheightright-boheight, Canvas.width, Posheight+deltaheightright); Ctx.lineto (Canvas.width, canvas.height); Ctx.lineto (0, Canvas.height); Ctx.lineto (0, Posheight+deltaheight); Ctx.closepath (); Ctx.fill (); } requestanimframe (loop); } loop (); </Script></Body></HTML>
CANVAS Wave dynamic Background