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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
js控制随机数生成概率代码实例
Mar 21 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JS如何把字符串转换成json
Feb 21 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
德生PL330的评价与改造
2021/03/02 无线电
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
vuex state中的数组变化监听实例
2019/11/06 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python基于opencv 实现图像时钟
2021/01/04 Python
怎样声明接口
2014/09/19 面试题
什么是servlet链?
2014/07/13 面试题
销售顾问岗位职责
2014/02/25 职场文书
临床医师个人自我评价
2014/04/06 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
超市客服工作职责
2014/06/11 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle