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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
微信小程序实现左滑删除效果
Nov 18 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
List the UTC Time on a Computer
2007/06/11 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JS判断数组那点事
2017/10/10 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python验证码识别的方法
2015/07/10 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python装饰器语法糖
2019/01/02 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python如何安装下载后的模块
2020/07/03 Python
python tkinter实现连连看游戏
2020/11/16 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
单位办理社保介绍信
2014/01/10 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年销售工作总结
2014/12/01 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Go 自定义package包设置与导入操作
2021/05/06 Golang
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python