Эта статья разделяет код реализации фона фона водяной волны JS для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
Код реализации:
<! Doctype html> <html> <head> <title> фон водяной волны < /title> <meta charset = "gb2312" /> <style> html, body {width: 100%; высота: 100%; Заполнение: 0; Margin: 0;} </style> </head> <body> <canvas id = "canvas" style = "Положение: абсолют; top: 0px; слева: 0px; z-index: 1;"> </canvas> <script type = "text/javascript"> vareNvas = document.getElementByid ('canvas'); var ctx = canvas.getContext ('2d'); canvas.width = canvas.parentnode.offsetwidth; canvas.height = canvas.parentnode.offsetheight; // Если браузер поддерживает requestAnimframe, используйте requestAnimframe, иным образом используйте settimeout window.requestanimframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || function (callback) {window.sedtimeout (callbbbbe, 1000 /60 /60 /60 /60); // размер волны var boheight = canvas.height / 10; var posheight = canvas.height / 1.2; // начальный угол равен 0 var step = 0; // Определить цвета трех разных волн var lines = ["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); шаг ++; // рисовать 3 прямоугольника разных цветов для (var j = lines.length-1; j> = 0; j--) {ctx.fillstyle = lines [j]; // Угол каждого прямоугольника отличается, и каждый имеет разницу в варке var 45 градусов = (шаг+j*50)*math.pi/180; var deltaheight = math.sin (angel) * boheight; var deltaheightright = math.cos (angel) * boheight; ctx.beginpath (); ctx.moveto (0, posheight+deltaheight); ctx.beziercurveto (canvas.width / 2, posheight+deltaheight-boheight, canvas.width / 2, posheight+deltaheightright-boheight, canvas.width, poseight+deltaheightright); ctx.lineTo (canvas.width, canvas.height); ctx.lineTo (0, canvas.height); ctx.lineto (0, posheight+deltaheight); ctx.closepath (); ctx.fill (); } requestAnimframe (loop); } петля(); </script> </body> </html>Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.