Este artículo comparte el código de implementación del efecto de fondo de la onda de agua JS para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<! Doctype html> <html> <fead> <title> Water Wave Fondo </title> <meta charset = "gb2312" /> <style> html, cuerpo {ancho: 100%; Altura: 100%; relleno: 0; margen: 0;} </ystye> </head> <body> <Canvas id = "Canvas" style = "Position: Absolute; Top: 0px; Left: 0px; Z-Index: 1;"> </Canvas> <script type = "text/javaScript"> var canvas = document.getElementByid ('Canvas'); var ctx = canvas.getContext ('2d'); Canvas.Width = Canvas.ParentNode.OffSetWidth; Canvas.Height = Canvas.ParentNode.Offsetheight; // Si el navegador admite requestAnImframe, use requestAnImframe, use setTimeOT Window.RequestanImFrame = (function () {return Window.RequestanimationFrame || window.webkitRequestanimationFrame || window.mozRequestanimation || function (callback) {window.setTimeut (callback, 1000 /60 /60 /60 // tamaño de onda var boheight = Canvas.Height / 10; var PosHeight = Canvas.Height / 1.2; // El ángulo inicial es 0 var paso = 0; // Definir los colores de tres ondas diferentes líneas var = ["RGBA (0,222,255, 0.2)", "RGBA (157,192,249, 0.2)", "RGBA (0,168,255, 0.2)"]; function loop () {ctx.ClearRect (0,0, Canvas.Width, Canvas.Height); paso ++; // dibujar 3 rectángulos de diferentes colores para (var j = líneas.length-1; j> = 0; j--) {ctx.fillstyle = líneas [j]; // El ángulo de cada rectángulo es diferente, y cada uno tiene una diferencia de 45 grados VAR Angle = (paso+j*50)*Math.pi/180; var deltaheight = math.sin (ángulo) * boheight; var deltaheightright = math.cos (ángulo) * 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 (bucle); } bucle(); </script> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.