Este artigo compartilha o Código de Implementação do Efeito JS Water Wave Background para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html> <head> <title> Background Water Wave </ititle> <meta charset = "gb2312" /> <yoy> html, corpo {largura: 100%; Altura: 100%; preenchimento: 0; margem: 0;} </style> </head> <body> <canvas id = "canvas" style = "posição: absoluto; top: 0px; esquerda: 0px; z-index: 1;"> </senavas> <script type = "text/javaScript"> var canvas = document.getElementByid ('Canvas'); var ctx = Canvas.getContext ('2D'); canvas.width = canvas.parentnode.offsetWidth; canvas.Height = Canvas.parentnode.offsetHight; // se o navegador suportar requestanimframe, use requestanimframe, caso contrário, use setTimeout window.requestanimframe = (function () {retorna window.requestanimationframe || window.webkitRequestanimationframe || window.mozRequestanimationFrame || // Tamanho da onda var boHeight = Canvas.Height / 10; var PosHeight = Canvas.Height / 1.2; // O ângulo inicial é 0 var etapa = 0; // define as cores de três ondas diferentes 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); Etapa ++; // desenha 3 retângulos de cores diferentes para (var j = lines.length-1; j> = 0; j--) {ctx.fillstyle = linhas [j]; // O ângulo de cada retângulo é diferente e cada um tem uma diferença de 45 graus var angle = (passo+j*50)*Math.pi/180; var deltaHeight = math.sin (ângulo) * boheight; var deltaheightright = Math.cos (ângulo) * BoHeight; ctx.BeginPath (); ctx.moveto (0, picante+deltaHeight); ctx.bezierCurveto (Canvas.width / 2, Ficaheight+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, picante+deltaHeight); ctx.closePath (); ctx.fill (); } requestanimframe (loop); } laço(); </script> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.