资源描述：
《javascript实现起伏的水波背景效果_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、javascript实现起伏的水波背景效果_这篇文章主要为大家具体介绍了javascript实现起伏的水波背景效果，具有肯定的参考价值，感爱好的小伙伴们可以参考一下本文实例为大家分享了js水波背景效果的实现代码，供大家参考，具体内容如下效果图：实现代码：代码如下:!DOCTYPEhtmlhtmlheadtitle水波背景/titlemetacharset="gb2312"/stylehtml,body{width:100%;height:100%;padding:0;margin:0;}/style/headbodycanvasid="canvas"s
2、tyle="position:absolute;top:0px;left:0px;z-index:1;"/canvasscripttype="text/javascript"varcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');canvas.width=canvas.parentNode.offsetWidth;canvas.height=canvas.parentNode.offsetHeight;//假如扫瞄器支持requestAnimFrame则用法r
3、equestAnimFrame否则用法setTimeoutwindow.requestAnimFrame=(function(){returnwindow.requestAnimationFrame
4、
5、window.webkitRequestAnimationFrame
6、
7、window.mozRequestAnimationFrame
8、
9、function(callback){window.setTimeout(callback,1000/60);};})();//波浪大小varboHeight=canvas.height/10;varposHeight
10、=canvas.height/1.2;//初始角度为0varstep=0;//定义三条不同波浪的颜色varlines=["rgba(0,222,255,0.2)","rgba(157,192,249,0.2)","rgba(0,168,255,0.2)"];functionloop(){ctx.clearRect(0,0,canvas.width,canvas.height);step++;//画3个不同颜色的矩形for(varj=lines.length-1;j=0;j--){ctx.fillStyle=lines[j];//每个矩形的角度都不同，每
11、个之间相差45度varangle=(step+j*50)*Math.PI/180;vardeltaHeight=Math.sin(angle)*boHeight;vardeltaHeightRight=Math.cos(angle)*boHeight;ctx.beginPath();ctx.moveTo(0,posHeight+deltaHeight);ctx.bezierCurveTo(canvas.width/2,posHeight+deltaHeight-boHeight,canvas.width/2,posHeight+deltaHeightR
12、ight-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程序设计有所关心。...
