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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1769 次日期：2016-06-29 15:19:20

温馨提示：小编为您整理了“javascript实现起伏的水波背景效果”,方便广大网友查阅！

这篇文章主要为大家详细介绍了javascript实现起伏的水波背景效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

实现代码：

代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

html, body {width:100%; height:100%; padding:0; margin:0;}

</style>

</head>

<body>

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判断用户名和密码不能为空的实现代码

手机网站地址：javascript实现起伏的水波背景效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！