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


Posted in Javascript onMay 16, 2016

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

效果图:

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

实现代码:

<!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程序设计有所帮助。

Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
浅析JavaScript动画
Jun 10 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
整理一下常见的IE错误
Nov 18 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 #Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 #Javascript
js流动式效果显示当前系统时间
May 16 #Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 #Javascript
JavaScript代码性能优化总结(推荐)
May 16 #Javascript
AngularJS学习笔记之依赖注入详解
May 16 #Javascript
javascript表单事件处理方法详解
May 15 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python制作websocket服务器实例分享
2016/11/20 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python并行分布式框架Celery详解
2018/10/15 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
雅虎笔试题(字符串操作)
2015/03/24 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
毕业自荐信
2013/12/16 职场文书
三年大学自我鉴定
2014/01/16 职场文书
个人简历中自我评价
2014/02/11 职场文书
机关会计岗位职责
2014/04/08 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
PyTorch 如何自动计算梯度
2021/05/23 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL