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

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

效果图：

实现代码：

！DOCTYPE htmlhtmlhead标题水波背景/title meta charset=' GB 2312 '/style html，正文{ width :100%；高度：100%;划水：0;margin :0 }/style/head body canvas id=' canvas ' style=' position : absolute；top :0 pxleft :0 px ' z-index :1；/canvas脚本类型=' text/JavaScript ' var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；帆布。宽度=画布。parentnode。偏移；帆布。高度=画布。parentnode。偏移光线；//如果浏览器支持请求anismframe则使用请求anismframe否则使用设置退出窗口。request animsframe=(function(){ return window。requestanimationframe | | window。webkitrequestanimationframe | |窗口。mozrequestanimationframe | |函数(回调){ window.setTimeout(回调，1000/60);};})();//波浪大小var BohAiR=画布。身高/10；var posHeight=canvas。身高/1.2；//初始角度为0 var步长=0;//定义三条不同波浪的颜色var line=[' 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。高度)；步骤；//画3个不同颜色的矩形for(var j=line。长度-1；j=0；CTX。FillStyle=line[j]；//每个矩形的角度都不同，每个之间相差45度var angle=(步长j*50)*Math .PI/180；deltaHeight=Math.sin(角度)* BohA8var deltaHeightRight=Math.cos(角度)* BohA8CTX。begin path()；ctx.moveTo(0，posHeight deltaHeight)；CTX。beziercerveto(canvas.width/2，posHeight delta height-boh8，canvas.width/2，posHeight delta height right-boh8，canvas。宽度，posHeight高度右)；ctx.lineTo(canvas.width，canvas。高度)；ctx.lineTo(0，画布。高度)；ctx.lineTo(0，posHeight deltaHeight)；CTX。close path()；CTX。fill()；} requestAnimFrame(循环);} loop()；/脚本/正文/html以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。