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

赞 (0)

相关推荐

  • jQuery实现点击水纹波动动画

    jQuery实现点击水纹波动动画

    jQuery点击水纹波动动画原理: 1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX>     2.代码会定位 鼠标相对 与 标签的位置,以鼠标点为圆心画圆     3.圆的半径 可以自定义(默认为标签的最大宽或高度)     4.圆点颜色,和动画时间等可以自行修改内部代码,或直接 调用 $().css({})方法 进行覆盖 ripple-wrapper.js $(function(){ $(".r

  • Android实现点击Button产生水波纹效果

    Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

  • Android项目实战手把手教你画圆形水波纹loadingview

    Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • js利用div背景，做一个竖线的效果。

    后来发现,如果div样式,如果设置了具体的高度,无论ie还ff,都能正常的表现. 但这个高度并不是固定的,而是会随着旁边div内容的多少而变化.最后,只好借助javascript,加载时捕获有关的div的高度,将其赋值给指定的div样式,终于看到了想要的东西. 具体脚本是这样的: window.onload=function(){ document.getElementById('bg').style.height=document.getElementById('mydiv').offsetH

  • Android仿水波纹流量球进度条控制器

    Android仿水波纹流量球进度条控制器

    仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

  • JS实现很酷的水波文字特效实例

    本文实例讲述了JS实现很酷的水波文字特效.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现很酷的水波文字效果</title> </head> <body bgcolor="#000000" onLoad="if (document.all)wave()"> <center> <div id='water' sty

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

  • 利用JQuery和JS实现奇偶行背景颜色自定义效果

    JQuery实现: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten

随机推荐