这篇文章主要为大家详细介绍了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"></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程序设计有所帮助。
- 大连市2014上半年度国家职业资格企业人力资源管理师认证培训通知
- 重庆市人力资源开发培训中心举办2014年上半年事业单位公招考前培训班
- 2014年辽宁省国家一/二/三级信用管理师培训招生简章
- 2014年重庆市开展人才中介服务执业资格考试培训的通知
- 2014年鄂州市计算机等级培训考试工作通知
- 天津市2014年全国卫生技术资格考试护理专业考前培训班招生简章
- 天津市2014年全国卫生技术资格考试护理专业考前培训班招生简章
- 2014年山东建筑大学岗位培训开班计划通知
- 内蒙古开展2014年专业技术人员继续教育培训工作的通知
- 2014年苏州常熟市企业人力资源管理师国家职业资格培训班招生简章
- 2014年莆田市直党政机关及其所属单位培训办班计划的通知
- 莆田市2014年市直机关及其所属单位培训办班计划安排表
- 芜湖市2013-2014学年中小学教师继续教育岗位培训远程培训工作的通知
- 南平市旅游局开展2013年导游人员年审培训工作的通知
- 钦州人才市场培训部2014年职称英语考前培训招生简章
- 杭州市报考2014年执业医师资格考试人员组织网上考前培训通知
- 重庆市人力资源开发培训中心举办2014年上半年事业单位公招考前培训班(预报名)
- 2014年金华市人力资源研究会免费公务员笔试培训报名通知
- 连云港市东海县2014年中小学(幼儿园)二级心理咨询师国家职业资格培训班开班的通知
- 2014年重庆市预报名《行政职业能力测验》/《申论》能力提升培训第1期班
- 2014年重庆市各类能力提升培训班全年课程安排
- 领取2013年度宁夏石嘴山市继续教育公需课培训结业证书的通知
- 合肥市2014年度专业技术人员继续教育培训计划表26
- 合肥市2014年度专业技术人员继续教育培训计划表24
- 合肥市2014年度专业技术人员继续教育培训计划表25
- impregnated
- impregnating
- impregnation
- impresario
- impress
- impressed
- impression
- impressionable
- impressionable age
- impression formation
- 磉
- 磉磴
- 磊
- 磊磊
- 磊落
- 磊落光明
- 磋
- 磋切
- 磋商
- 磋摩
- 2022年五一法定节日一天还是三天
- 五一高速公路免费的吗
- 2022五一劳动节劳模个人先进事迹5篇
- 劳动节的优秀作文大全10篇
- 2022五一劳动节学生精选作文5篇
- 2022五一劳动节小学生演讲稿最新5篇
- 2022劳动节最新意义介绍
- 2022五一劳动节的来历和全称介绍
- 2022年劳动节节日最新由来介绍
- 2022最新劳动节节日诗词大全