この記事では、参照のためのJS水波の背景効果の実装コードを共有しています。特定のコンテンツは次のとおりです
複製画像：
実装コード：
<！doctype html> <html> <head> <title>水波の背景< /title> <meta charset = "gb2312" /> <style> html、body {width：100％;高さ：100％;パディング：0;マージン：0;} </style> </head> <body> <canvas id = "canvas" style = "position：aspolute; top：0px; left：0px; z-index：1;"> </canvas> <script = "text/javascript"> var canvas = document.getelementbyid（ 'canvas'）; var ctx = canvas.getContext（ '2d'）; canvas.width = canvas.parentnode.offsetwidth; canvas.height = canvas.parentnode.offsetheight; //ブラウザがRequestAnimFrameをサポートする場合、RequestanimFrameを使用します。それ以外の場合は、setimeout window.requestanimframe =（function（）{return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || function || window（call.setmeout（call.setmeut（callback）; //波のサイズvar boheight = canvas.height / 10; var posheight = canvas.height / 1.2; //初期角度は0 var step = 0です。 // 3つの異なる波の色を定義する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]; //各長方形の角度は異なり、それぞれに45度の差がありますvar angle =（step+j*50）*math.pi/180; var deltaheight = math.sin（angle） * boheight; var deltaheightright = 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>上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。