This article shares the implementation code of js water wave background effect for your reference. The specific content is as follows
Reproduction image:
Implementation code:
<!DOCTYPE html><html><head> <title>Water wave background</title> <meta charset="gb2312" /> <style> html, body {width:100%; height:100%; padding:0; margin:0;} </style></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; //If the browser supports requestAnimFrame, use requestAnimFrame, otherwise use setTimeout window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); // Wave size var boHeight = canvas.height / 10; var posHeight = canvas.height / 1.2; //The initial angle is 0 var step = 0; //Define the colors of three different waves 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); step++; //Draw 3 rectangles of different colors for(var j = lines.length - 1; j >= 0; j--) { ctx.fillStyle = lines[j]; //The angle of each rectangle is different, and each has a 45-degree difference 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>The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.