javascript实现起伏的水波背景效果
2016-06-29来源:易贤网

这篇文章主要为大家详细介绍了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程序设计有所帮助。

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息