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

2019-11-20 10:03:04

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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程序设计有所帮助。

上一篇：js判断登陆用户名及密码是否为空的简单实例

下一篇：JavaScript判断用户名和密码不能为空的实现代码