<!DOCTYPE html>

<html>

    <head>

     <title>水波背景</title>

     <meta charset="utf-8" />

     <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">

           //获得canvas容器

          var canvas = document.getElementById('canvas');

          //获得画笔

          var ctx = canvas.getContext('2d');

          //canvas设置宽度

          canvas.width = canvas.parentNode.offsetWidth;

          //canvas设置高度

          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(){

              //清除canvas内容

               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>

js实现水波纹背景的更多相关文章

  1. android 5.0 默认水波纹背景属性,可设置不论什么View

    actionBarItemBackground   5.0以上超出边界圆形水波纹 selectableItemBackground  5.0以上边界内圆形水波纹 这两个属性在5.0下面是默认的灰色效果 ...

  2. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  3. css 滚动视差 之 水波纹效果

    核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...

  4. WebGL——水波纹特效

    大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...

  5. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  6. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  7. android 5.0 水波纹 实现

    1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?& ...

  8. 聊聊Android5.0中的水波纹效果

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...

  9. android 点击水波纹效果

    这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... ...

随机推荐

  1. JSP内置对象和EL内置对象

    JSP共有九大内置对象: (1) HttpSession类的session对象作用:主要用于来分别保存每个用户信息,与请求关联的会话:         会话状态维持是Web应用开发者必须面对的问题. ...

  2. hosts.allow和hosts.deny文件

    之前想通过外部主机访问自己主机上的VMWare虚拟机,使用了VMWare的NAT端口映射,经过一番尝试,算是成功了,总结一下. VMWare NAT端口映射就可以将虚拟机上的服务映射成自己主机上的端口 ...

  3. linux 用户管理、权限管理

    1.useradd -[ugGdsce]2.passwd 用户名 ================================================ 1.chmod 2.chown 3. ...

  4. Eclipse使用Maven时，修改默认中央仓库后的配置报错找不到包的问题解决

    一般在公司内容配置Maven时会在settings.xml文件下配置私服nexus地址,那么修改完之后在Eclipse中如果不指定用户目录级别的settings.xml文件会出现找不到包的问题. se ...

  5. Android GIS开发系列-- 入门季（15） 网络图层加载

    一.首先我们来看一个网络图层: http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer,这是全 ...

  6. oracle initialization or shutdown in progress 问题解决

    今天登录oracle时遇到oracle initialization or shutdown in progress 这个错误提示,在网上搜了下,试了非常多方法,最后结合几种方法结合,成功攻克了问题! ...

  7. VS2012 ASP.NET 母版页的创建与使用

    在做牛腩新闻公布系统的过程中,须要使用ASP.NET的母版页来抽出全部网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看怎样创建一个新的母版页,例如以下图所看到的: 加入之后,例如以下 ...

  8. RELU 激活函数及其他相关的函数

    RELU 激活函数及其他相关的函数 转载 2016年07月21日 20:51:17 45778 本博客仅为作者记录笔记之用,不免有很多细节不对之处. 还望各位看官能够见谅,欢迎批评指正. 更多相关博客 ...

  9. Python学习笔记17：标准库之数学相关（math包，random包）

    前面几节看得真心累.如今先来点简单easy理解的内容. 一 math包 math包主要处理数学相关的运算. 常数 math.e   # 自然常数e math.pi  # 圆周率pi 运算函数 math ...

  10. Android API Guides –System Permissions

    系统权限 声明: 本文由Gordon翻译 公布于www.dlvoice.com 欢迎转载,但请保留此声明 原文地址:http://developer.android.com/guide/topics/ ...