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" 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>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
-
本文向大家介绍Android实现水波纹效果，包括了Android实现水波纹效果的使用技巧和注意事项，需要的朋友参考一下 一、效果 点击开始： 点击停止： 二、在MainActivity中 三、在activity_main中 四、在WaveView中： 五、在CircleImageView中： 六、在attrs中 以上所述是小编给大家介绍的Android实现水波纹效果，希望对大家有所帮助，如
-
本文向大家介绍Android实现水波纹特效，包括了Android实现水波纹特效的使用技巧和注意事项，需要的朋友参考一下 最近需要做个类似于水波纹动画的效果，思考了一下不需要UI切个动态图，Android原生的技术利用动画或者自定义控件都可以实现，下面上个图类似于这样的效果 下面请看第一种动画实现，这种方式较为简单些，就是利用3个ImageView不断地做缩放和渐变的动画。 布局文件定义一下 接下来
-
本文向大家介绍Android特效之水波纹的实现，包括了Android特效之水波纹的实现的使用技巧和注意事项，需要的朋友参考一下 前言 水波纹特效，想必大家或多或少见过，在我的印象中，大致有如下几种： 支付宝 "咻咻咻" 式 流量球 "荡漾" 式 真实的水波纹效果，基于Bitmap处理式 话不多说，先来看看效果： 填充式水波纹，间距相等 非填充式水波纹，间距相等 非填充
-
本文向大家介绍Android实现兼容的水波纹效果，包括了Android实现兼容的水波纹效果的使用技巧和注意事项，需要的朋友参考一下 先看看效果图 其实，要实现这一效果很简单，只要分drawable和drawablev21两个文件夹就好了。 普通情况下的selector： v21中的selector： 这里ripple中的color就是按下的水波纹颜色，在里面加入一个item，这个item就会变成背
-
本文向大家介绍iOS 水波纹动画的实现效果，包括了iOS 水波纹动画的实现效果的使用技巧和注意事项，需要的朋友参考一下 本人最近在研究iOS动画，至于原理，我不在这里说了。毕竟这里的标题：水波纹的实现。 在这里，要学习水波纹的实现，首先要知道以下几点知识： 1.正弦函数：y = Asin(wx +b) + c。相信大家都比较熟悉。 2.CAShapeLayer的简单实用，相信看一下，就是知道其大概
-
本文向大家介绍Android WaveView实现水流波动效果，包括了Android WaveView实现水流波动效果的使用技巧和注意事项，需要的朋友参考一下 水流波动的波形都是三角波，曲线是正余弦曲线，但是Android中没有提供绘制正余弦曲线的API，好在Path类有个绘制贝塞尔曲线的方法quadTo，绘制出来的是2阶的贝塞尔曲线，要想实现波动效果，只能用它来绘制Path曲线。待会儿再讲