javascript实现起伏的水波背景效果

本文实例为大家分享了js水波背景效果的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

<!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>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。