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

本文主要是介绍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>

这篇关于js实现起伏的水波背景效果会员背景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！