Dieser Artikel teilt den Implementierungscode von JS Water Wave Hintergrundeffekt für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<! DocType html> <html> <kopf> <titels> Wasserwellenhintergrund < /title> <meta charset = "gb2312" /> <style> html, Körper {Breite: 100%; Höhe: 100%; Polsterung: 0; Rand: 0;} </style> </head> <body> <canvas id = "canvas" style = "Position: absolut; obere: 0px; links: 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.offseteight; // Wenn der Browser RequestAnimFrame unterstützt, verwenden Sie RequestAnimFrame, verwenden Sie ansonsten ein setTimeout -Fenster. }) (); // Wellengröße var boHeight = canvas.height / 10; var posheight = canvas.height / 1.2; // Der Anfangswinkel ist 0 var Schritt = 0; // Definieren Sie die Farben von drei verschiedenen Wellen var lines = ["RGBA (0,222,255, 0,2)", "RGBA (157,192,249, 0,2)", "RGBA (0,168,255, 0,2)"]; Funktionsloop () {ctx.clearRect (0,0, canvas.width, canvas.height); Schritt ++; // 3 Rechtecke verschiedener Farben zeichnen (var j = Linien.Length-1; j> = 0; j-) {ctx.FillStyle = Linien [j]; // Der Winkel jedes Rechtecks ist unterschiedlich und hat jeweils einen 45-Grad-Differenzvar Angle = (Schritt+J*50)*Math.pi/180; var deltaheighty = math.sin (Winkel) * BoHeight; var deltaheglight = math.cos (Winkel) * BoHeight; ctx.beginPath (); ctx.moveto (0, posheight+deltaheight); ctx.beziercurveto (canvas.width / 2, Posheight+Deltaheightheightheight, Canvas. ctx.lineto (canvas.width, canvas.height); ctx.lineto (0, canvas.height); ctx.lineto (0, posheight+deltaheight); ctx.closepath (); ctx.fill (); } RequestArimframe (Schleife); } Loop (); </script> </body> </html>Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.