js实现起伏的水波背景效果会员背景

约定不等于承诺〃 2022-04-08 13:15 188阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
     <title>水波背景</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;
      //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout 
      window.requestAnimFrame = (function(){ 
      return window.requestAnimationFrame  || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function( callback ){ 
         window.setTimeout(callback, 1000 / 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); 
       step++; 
       //画3个不同颜色的矩形 
       for(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>